Skip to content

web_flea_market
web_flea_market
Commit 857c97aa authored by HuangJunbo's avatar HuangJunbo 💻
Browse files
Options

index.html 

Signed-off-by: HuangJunbo's avataruuo00_n <uuo00_n@outlook.com>
parent b5914b93
Hide whitespace changes
Inline Side-by-side
Showing with 385 additions and 52 deletions
flea_market/index.html
View file @ 857c97aa
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>首页</title>
<link rel="stylesheet" type="text/css" href="css/main.css"> <script src="jquery-1.11.2.min.js"></script>
<script src="js/jquery-3.5.1.js"></script> <style>
<script src="js/jquery-ui.min.js"></script> article {
margin-left: 400px;
margin-top: -500px;
}
footer {
width: 100%;
height: 50px;
position: relative;
background-color: #cccccc;
margin-top: -20px;
}
article input {
margin: 10px 0px;
}
footer .link div {
float: right;
margin-top: 20px;
color: #fff;
}
.index {
width: 800px;
position: relative;
left: -30px;
top: -30px;
}
.index img {
margin-left: 450px;
margin-top: -550px;
width: 550px;
height: 450px;
}
hr {
margin-left: 0px;
width: 300px;
}
.tags {
width: 1070px;
height: 700px;
background-color: #fef9f4;
position: relative;
left: 100px;
top: 0;
}
.user {
width: 200px;
height: 100%;
position: relative;
left: 1100px;
top: -520px;
}
.user form {
width: 200px;
height: 200px;
background-color: #fef9f4;
}
.user form input {
/* /* width: 200px; */
margin-top: 20px;
}
.account {
position: relative;
left: 20px;
top: 70px;
}
.account input {
border: none;
border-bottom: 1px #e6e6e6 solid;
/* background-color: #fef9f4; */
}
#login {
width: 80px;
height: 40px;
background-color: #dd2727;
color: #ffffff;
font-size: medium;
font-family: "time new roman";
border: 1px #dd2727 solid;
}
.button {
/* padding-left: 30px; */
/* display: inline; */
float: right;
margin-top: 20px;
width: 80px;
height: 40px;
background-color: #cfbaba;
color: #ffffff;
font-size: medium;
font-family: "time new roman";
border: 1px #df6767 solid;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
margin-right: 39.9px;
}
.tit {
vertical-align: middle;
width: 30px;
height: 30px;
}
.navss {
width: 800px;
background-color: blue;
}
.op {
width: 1800px;
}
.link {
width: 200px;
height: 50%;
}
.link .item h3 {
height: 25px;
padding-left: 25px;
}
.link .item h3 a {
color: #444241;
}
.link .item p {
height: 18px;
padding-left: 18px;
}
.link .item p a {
font-style: 12px;
position: relative;
top: -10px;
color: #444241;
}
.goods:first-child {
position: relative;
left: 220px;
top: -400px;
}
.goods:nth-child(2) {
position: relative;
left: 220px;
top: -400px;
}
.goods:nth-child(3) {
position: relative;
left: 400px;
top: -810px;
}
.goods:nth-child(4) {
position: relative;
left: 400px;
top: -810px;
}
.goods:nth-child(5) {
position: relative;
left: 590px;
top: -1220px;
}
.goods:nth-child(6) {
position: relative;
left: 590px;
top: -1220px;
}
.picture img {
width: 200px;
height: 400px;
}
.goods img {
width: 160px;
height: 160px;
}
.title {
padding-left: 20px;
}
.price {
padding-left: 50px;
}
</style>
<link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<header> <div class="logo"><img src="img/logo.png" alt=""></div>
<div class="logo"><img src="img/logo.png"/></div> <form class="searchform">
<form class="searchform"> <input type="text" name="search" id="search">
<input type="text" name="search" id="search"> <input type="submit" value="搜索" id="button">
<input type="submit" value="搜索" id="button"> </form>
</form> <div class="navigation">
<div class="navigation"> <form class="navigation">
<a href="#">手机</a>&nbsp;&nbsp;|&nbsp; <br>
<a href="#">电脑</a>&nbsp;&nbsp;|&nbsp; <a href="#">手机</a>&nbsp;&nbsp;|&nbsp;
<a href="#">旧书</a>&nbsp;&nbsp;|&nbsp; <a href="#">电脑</a>&nbsp;&nbsp;|&nbsp;
<a href="#">服装</a> <a href="#">旧书</a>&nbsp;&nbsp;|&nbsp;
</div> <a href="#">服装</a>
<nav> </form>
<div class="nav"> </div>
<img src="img/tag.png"/> <nav class="op">
<a href="#">商品分类</a> <div class="nav">
</div> <img src="img/MENU.png" alt="">
<div class="tag"> <a href="#">商品分类</a>
<ul> </div>
<li><a href="#">首页</a></li> <div class="tag">
<li><a href="#">闲置数码</a></li> <ul>
<li><a href="#">教材书籍</a></li> <li><a href="#">首页</a></li>
<li><a href="#">运动装备</a></li> <li><a href="#">闲置数码</a></li>
<li><a href="#">鞋服配饰</a></li> <li><a href="#">教材书籍</a></li>
<li><a href="#">日用家居</a></li> <li><a href="#">运动装备</a></li>
</ul> <li><a href="#">鞋服配饰</a></li>
</div> <li><a href="#">日用家具</a></li>
</nav> </ul>
</header> </div>
<footer> </nav>
<div class="navbar">
<div class="link">
<ul> <br>
<li><a href="#">关于我们</a></li> <br>
<li><a href="#">网站地图</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">版权声明</a></li> <div class="tags">
</ul> <div class="link">
</div> <div class="item">
<div class="copyright"> <h3><a href="#">闲置数码</a></h3>
<p>版权所有&copy;uuo00_n-team</p> <p>
</div> <a href="">智能手机</a>
</div> <a href="">单反相机</a>
</footer> </p>
</div>
<hr>
<div class="item">
<h3><a href="#">鞋服配饰</a></h3>
<p>
<a href="">连衣裙</a>
<a href="">皮肤衣</a>
</p>
</div>
<hr>
<div class="item">
<h3><a href="#">教科书籍</a></h3>
<p>
<a href="">文学历史</a>
<a href="">科学教育</a>
</p>
</div>
<hr>
<div class="item">
<h3><a href="#">运动装备</a></h3>
<p>
<a href="">运到鞋</a>
<a href="">皮肤衣</a>
<a href="">行车记录仪</a>
</p>
</div>
<hr>
<div class="item">
<h3><a href="#">日用家居</a></h3>
<p>
<a href="">家庭清洁</a>
<a href="">保温杯</a>
</p>
</div>
<hr>
<div class="index">
<img src="img/index.png" alt="">
</div>
<div class="user">
<form action="#" class="account">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" id="login" value="登录">
<div class="button">
<a href="注册.html">注册</a>
</div>
</form>
</div>
<section id="page">
<h3 class="navss"><img src="img/louceng.png" class="tit">闲置数码Idle digital</h3>
<div class="picture">
<img src="img/nav1.png" alt="">
</div>
<div class="commend">
<div class="goods">
<a href="#"><img src="img/goods1.png" alt=""></a>
<div class="title">
<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;努比亚</a>
</div>
<div class="price">￥1488</div>
</div>
<div class="goods">
<a href="#"><img src="img/goods2.png" alt=""></a>
<div class="title">
<a href="#">百得吸尘器家用手持式</a>
</div>
<div class="price">￥1088</div>
</div>
<div class="goods">
<a href="#"><img src="img/goods3.png" alt=""></a>
<div class="title">
<a href="#">&nbsp;&nbsp;华为畅玩荣耀</a>
</div>
<div class="price">￥888</div>
</div>
<div class="goods">
<a href="#"><img src="img/goods4.png" alt=""></a>
<div class="title">
<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;海尔</a>
</div>
<div class="price">￥1099</div>
</div>
<div class="goods">
<a href="#"><img src="img/goods5.png" alt=""></a>
<div class="title">
<a href="#">飞利浦精华加湿器</a>
</div>
<div class="price">￥38</div>
</div>
<div class="goods">
<a href="#"><img src="img/goods6.png" alt=""></a>
<div class="title">
<a href="#">手持式强力静音</a>
</div>
<div class="price">￥838.00</div>
</div>
</div>
</section>
</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file <script type="text/javascript">
$(document).ready(function () {
$("li").each(function (index) {
$(this).hover(function () {
$("li").animate({
width: 100
}, 500);
$("li").eq(index).animate({
width: 200
}, 500);
});
});
});
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment