项目的导航页
<!DOCTYPE html>
<html>
<head>
<title>页面布局</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;}
/*下面是头部*/
.head{
width: 100%;
height: 187px;
background-color: #f12;}
.ha1{
width: 100%;
height: 28px;
background-color: rgb(244,244,244);}
.ha2-1{
width: 1200px;
height: 28px;
background-color: rgb(244,244,244);
margin: 0 auto;}
.ha3-1{
width: 160px;
height: 28px;
background-color: rgb(244,244,244);
float: left;}
.ha3-1-1{
display: block;
line-height: 28px;
margin: 0 30px 0 10px;
font-size: 12px;
text-decoration: none;
color: rgb(153,140,89);}
.ha3-2{
width: 504px;
height: 28px;
background-color: rgb(244,244,244);
float: right;}
.ha4-1{
width: 199px;
height: 28px;
background-color: rgb(244,244,244);
float: left;}
.ha4-1-1{
width: 36px;
display: block;
line-height: 28px;
padding: 0 10px;
font-size: 12px;
color: rgb(153,153,153);
text-decoration: none;
float: left;}
.ha4-1-2{
width: 123px;
display: block;
line-height: 28px;
padding: 0 10px;
font-size: 11px;
text-decoration: none;
color: rgb(174,15,23);
float: right;}
.ha4-2{
width: 304px;
height: 28px;
background-color: rgb(244,244,244);
float: right;}
.link{
display: block;
width: 3px;
line-height: 28px;
color: rgb(221,221,221);
margin: 0 8px;
float: left;
}
.ha4-2-1{
display: block;
line-height: 28px;
width: 36px;
color: rgb(153,153,153);
font-size: 12px;
text-decoration: none;
float: left;
padding: 0 10px;
}
.ha4-2-2{
display: block;
line-height: 28px;
width: 48px;
color: rgb(153,153,153);
font-size: 12px;
text-decoration: none;
float: left;
padding: 0 10px;
}
.ha4-2-3{
display: block;
line-height: 28px;
width: 48px;
color: rgb(153,153,153);
font-size: 12px;
text-decoration: none;
float: left;
padding: 0 10px;
}
.ha4-2-4{
display: block;
line-height: 28px;
width: 53px;
color: rgb(153,153,153);
font-size: 12px;
text-decoration: none;
float: left;
padding: 0 10px;
}
.he1{
width: 100%;
height: 115px;
background-color: #fff;}
.he2-1{
width: 1200px;
height: 115px;
background-color: #fff;
margin: 0 auto;}
.he3-1{
width: 404px;
height: 93px;
background-color: #fff;
float: left;}
.he3-2{
width: 392px;
height: 40px;
background-color: #fff;
float: left;
margin-top: 53px;}
.he3-2-1{
width: 316px;
height: 40px;
float: left;
border-color: rgba(51,51,51,0);
}
.he3-2-1-1{
width: 316px;
height: 38px;
}
.he3-2-2{
width: 76px;
height: 40px;
float: left;
background-color: rgb(179,71,71);
color: white;
font-size: 15px;
}
.he3-3{
width: 200px;
height: 115px;
background-color: #fff;
float: right;}
.hd1{
width: 100%;
height: 44px;
background-color: white; }
.hd2-1{
width: 1200px;
height: 44px;
background-color: white;
margin: 0 auto;}
.hd3-1{
width: 202px;
height: 44px;
background-color: rgb(188,75,75);
margin-right: 20px;
float: left;}
.hd3-1-1{
display: block;
line-height: 44px;
width: 170px;
color: white;
font-size: 20px;
text-decoration: none;
/*float: left;*/
padding: 0 16px;
}
.hd3-2{
width: 622px;
height: 44px;
background-color: white;
float: left;}
.hd3-2-1{
list-style: none;
background-color: white;
width: 622px;
margin: 0 auto;
overflow: hidden;
}
.hd3-2-1 li{
float: left;
width: 11%;
}
.hd3-2-1 a{
width: 100%;
display: block;
text-decoration:none;
background-color: white;
text-align: center;
color: black;
padding: 5px 0;
font-weight: bold;
}
.u1 a:hover{
background-color:red;
}
/*下面是身体*/
.conter{
width: 100%;
height: 13478px;
background-color: #f03814;}
.conters{
width: 1519px;
height: 13446px;
background-color: white;
margin: 0 auto;}
.con1-1{
width: 1519px;
height: 500px;
background-color: white;}
.con1-2{
width: 1519px;
height: 300px;
background-color: white;}
.con1-3{
width: 1519px;
height: 290px;
background-color: white;}
.con1-4{
width: 1519px;
height: 373px;
background-color: white;}
.con1-5{
width: 1519px;
height: 156px;
background-color: white;}
.con1-6{
width: 1519px;
height: 398px;
background-color: white;}
.list1-1{
width: 1200px;
height: 932px;
background-color: green;
margin: 0 auto;}
.con1-7{
width: 1519px;
height: 171px;
background-color: white;}
.con1-8{
width: 1519px;
height: 382px;
background-color: white;}
.con1-9{
width: 1519px;
height: 399px;
background-color: green;}
.cont1-1{
width: 1519px;
height: 444px;
background-color: blue;}
.cont1-2{
width: 1519px;
height: 542px;
background-color: #acd;}
.cont1-3{
width: 1519px;
height: 337px;
background-color: yellow;}
.cont1-4{
width: 1519px;
height: 501px;
background-color: gold;}
.cont1-5{
width: 1519px;
height: 594px;
background-color: #dec;}
.cont1-6{
width: 1519px;
height: 335px;
background-color: yellow;}
.cont1-7{
width: 1519px;
height: 502px;
background-color: #eef;}
.cont1-8{
width: 1519px;
height: 593px;
background-color: #fac;}
.cont1-9{
width: 1519px;
height: 339px;
background-color: gold;}
.conte1-1{
width: 1519px;
height: 497px;
background-color: green;}
.conte1-2{
width: 1519px;
height: 178px;
background-color: blue;}
.conte1-3{
width: 1519px;
height: 174px;
background-color: yellow;}
.conte1-4{
width: 1519px;
height: 249px;
background-color: #fed;}
.conte1-5{
width: 1519px;
height: 739px;
background-color: yellow;}
.conte1-6{
width: 1519px;
height: 499px;
background-color: green;}
.conte1-7{
width: 1519px;
height: 602px;
background-color: gold;}
.conte1-8{
width: 1519px;
height: 556px;
background-color: #acd;}
/*下面是脚*/
.foot{
width: 100%;
height: 614px;
background-color: #333; }
.ff{
width: 1519px;
height: 70px;
background-color: white;
}
.f{
width: 1200px;
height: 70px;
background-color: white;
margin: 0 auto;
}
.a1{
display: block;
text-align: center;
width: 20%;
height: 70px;
font-size: 20px;
/*font-weight: bold;*/
float: left;
line-height: 70px;
}
/* .o1{
width: 1200px;
height: 263px;
background-color: #333;
margin: 0 auto;}
.o2{
width: 1519px;
height: 280px;
background-color: #333;}*/
</style>
</head>
<body>
<!-- 头 -->
<div class="head">
<div class="ha1">
<div class="ha2-1">
<div class="ha3-1">
<a href="#" target="_blank" class="ha3-1-1">正品保障，免息分期！</a>
</div>
<div class="ha3-2">
<div class="ha4-1">
<a href="#" target="_blank" class="ha4-1-1">请登录</a>
<a href="#" target="_blank" class="ha4-1-2">注册即送3500元大礼包</a>
</div>
<div class="ha4-2">
<span class="link">|</span>
<a href="#" target="_blank" class="ha4-2-1">购物车</a>
<a href="#" target="_blank" class="ha4-2-2">客户服务</a>
<a href="#" target="_blank" class="ha4-2-3">会员福利</a>
<span class="link">|</span>
<a href="#" target="_blank" class="ha4-2-4">ENGLISH</a>
</div>
</div>
</div>
</div>
<div class="he1">
<div class="he2-1">
<div class="he3-1">
<img src="img/logo.png" alt="logo">
<img src="img/logo2.png" alt="logo2">
</div>
<div class="he3-2">
<label class="he3-2-1">
<input type="text" class="he3-2-1-1" value maxlength="30">
</label>
<button class="he3-2-2">搜索</button>
</div>
<div class="he3-3">
<img src="img/logo3.jpg" alt="logo3">
</div>
</div>
</div>
<div class="hd1">
<div class="hd2-1">
<div class="hd3-1">
<a href="#" target="_blank" class="hd3-1-1">全部商品</a>
</div>
<div class="hd3-2">
<ul class="hd3-2-1">
<li><a href="#" target="_blank">男表</a></li>
<li><a href="#" target="_blank">女表</a></li>
<li><a href="#" target="_blank">品牌馆</a></li>
<li><a href="#" target="_blank">闪购</a></li>
<li><a href="#" target="_blank">体验中心</a></li>
<li><a href="#" target="_blank">名匠维修</a></li>
<li><a href="#" target="_blank">奢品共享</a></li>
<li><a href="#" target="_blank">手表咨询</a></li>
<li><a href="#" target="_blank">万表达人</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 身 -->
<div class="conter">
<div class="conters">
<div class="con1-1">
<img src="img/1-1.jpg" alt="图片">
</div>
<div class="con1-2">
<img src="img/1-2.jpg" alt="图片">
</div>
<div class="con1-3">
<img src="img/1-3.jpg" alt="图片">
</div>
<div class="con1-4">
<img src="img/1-4.jpg" alt="图片">
</div>
<div class="con1-5">
<img src="img/1-5.jpg" alt="图片">
</div>
<div class="con1-6">
<img src="img/1-6.jpg" alt="图片">
</div>
<div class="list1-1"></div>
<div class="con1-7">
<img src="img/1-7.jpg" alt="图片">
</div>
<div class="con1-8">
<img src="img/1-8.jpg" alt="图片">
</div>
<div class="con1-9">
<img src="img/1-9.jpg" alt="图片">
</div>
<div class="cont1-1">
<img src="img/1-10.jpg" alt="图片">
</div>
<div class="cont1-2">
<img src="img/1-11.jpg" alt="图片">
</div>
<div class="cont1-3">
<img src="img/1-12.jpg" alt="图片">
</div>
<div class="cont1-4">
<img src="img/1-13.jpg" alt="图片">
</div>
<div class="cont1-5">
<img src="img/2-1.jpg" alt="图片">
</div>
<div class="cont1-6">
<img src="img/2-2.jpg" alt="图片">
</div>
<div class="cont1-7">
<img src="img/2-3.jpg" alt="图片">
</div>
<div class="cont1-8">
<img src="img/3-1.jpg" alt="图片">
</div>
<div class="cont1-9">
<img src="img/3-2.jpg" alt="图片">
</div>
<div class="conte1-1">
<img src="img/3-3.jpg" alt="图片">
</div>
<div class="conte1-2">
<img src="img/4-1.jpg" alt="图片">
</div>
<div class="list1-1"></div>
<div class="conte1-3">
<img src="img/5-1.jpg" alt="图片">
</div>
<div class="list1-1"></div>
<div class="conte1-4">
<img src="img/6-1.jpg" alt="图片">
</div>
<div class="conte1-5">
<img src="img/6-2.jpg" alt="图片">
</div>
<div class="conte1-6">
<img src="img/7-1.jpg" alt="图片">
</div>
<div class="conte1-7">
<img src="img/8-1.jpg" alt="图片">
</div>
<div class="conte1-8">
<img src="img/8-2.jpg" alt="图片">
</div>
</div>
</div>
<!-- 脚 -->
<div class="foot">
<div class="ff">
<div class="f">
<a ref="nofollow" class="a1">正品保障</a>
<a ref="nofollow" class="a1">免息分期</a>
<a ref="nofollow" class="a1">全球联保</a>
<a ref="nofollow" class="a1">假一赔三</a>
<a ref="nofollow" class="a1">终身售后</a>
</div>
</div>
<img src="img/logo4.png" alt="图片">
<!-- <div class="o1"></div>
<div class="o2"></div> -->
<!-- <div class="t"></div> -->
</div>
</body>
</html>
效果图如下:
截图.png
