摘要：<!DOCTYPE html>
<html>
<head>
<title>小米商城</title>
<meta charset="utf-8">
<!-- <
<!DOCTYPE html>
<html>
<head>
<title>小米商城</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<style type="text/css">
*{margin: 0px; padding: 0px;}
li{list-style: none;}
a{text-decoration: none;cursor: pointer;}/*cursor是指定光标移上效果*/
.clear{
clear: both;
}
/*头部样式*/
.header{
width: 100%;
height: 40px;
background-color: #333333;
margin: 10px 0px;
}
.memu{
width: 1226px;
height: 40px;
background-color: #ccc;
margin: 0px auto;
}
/*主题部分样式*/
.contents{
width: 100%;
margin: 10px auto;
}
.content{
width: 1226px;
margin: 0px auto;
}
.content-memu{
width: 1226px;
height: 68px;
background-color:#ccc;
margin: 10px auto;
}
.content-pic{
width: 1226px;
height: 460px;
margin: 10px auto;
}
.content-pic-l{
width: 246px;
height: 460px;
background-color: red;
float: left;
}
.content-pic-r{
width: 980px;
height: 460px;
background-color: green;
float: left;
}
.content-ul{
width: 1226px;
height: 170px;
background-color: #ccc;
margin: 10px auto;
}
.content-ul-0{
width: 236px;
height: 170px;
background-color: #5F5750;
float: left;
}
.content-ul-1{
width: 316px;
height: 170px;
background-color: red;
float: left;
margin-left: 14px;
}
.content-shop{
width: 1226px;
height: 400px;
margin: 10px auto;
}
.content-shop-0{
width: 236px;
height: 340px;
background-color:#ccc;
float: left;
}
.content-shop-1{
width: 236px;
height: 340px;
background-color:#ccc;
float: left;
margin-left: 11.5px;
}
.content-img{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 10px auto;
}
.content-phone{
width: 1226px;
height: 85px;
background-color: #ccc;
margin: 10px auto;
}
.content-phone-content{
width: 1226px;
height: 614px;
margin: 10px auto;
background-color: #ccc;
}
.content-phone-content-l{
width: 234px;
height: 614px;
float: left;
margin-right: 12px;
}
.content-phone-content-l-0{
width: 234px;
height: 300px;
float: left;
background: blue;
}
.content-phone-content-r{
width: 980px;
height: 614px;
float: left;
}
.content-phone-content-r div{
width: 236px;
height: 300px;
float: left;
background-color:red;
}
#content-phone-content-r-0{
width: 236px;
height: 145px;
float: left;
background-color: blue;
}
/*底部分样式*/
.footers{
width: 100%;
height: 345px;
margin: 10px auto;
}
.footer{
width: 1226px;
height: 345px;
background-color: #ccc;
margin: 0px auto;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="memu">
导航
</div>
</div>
<!-- 主题部分 -->
<div class="contents">
<div class="content">
<div class="content-memu">菜单</div>
<div class="content-pic">
<div class="content-pic-l"></div>
<div class="content-pic-r"></div>
</div>
<div class="content-ul">
<div class="content-ul-0"></div>
<div class="content-ul-1" style="background:url(images/midAD1.jpg);"></div>
<div class="content-ul-1" style="background:url(images/midAD2.jpg);"></div>
<div class="content-ul-1" style="background:url(images/midAD3.jpg);"></div>
</div>
<div class="content-shop">
<h1>小米闪购</h1>
<div class="content-shop-0" style="border-top:1px solid #E53935;"></div>
<div class="content-shop-1" style="border-top:1px solid #FFAC13;"></div>
<div class="content-shop-1" style="border-top:1px solid #83C44E;"></div>
<div class="content-shop-1" style="border-top:1px solid #2196F3;"></div>
<div class="content-shop-1" style="border-top:1px solid #E53935;"></div>
</div>
<div class="content-img" style="background:url(images/longAD1.jpg)"></div>
<div class="content-phone">手机</div>
<div class="content-phone-content">
<div class="content-phone-content-l" style="background: url(images/buy/手机AD.jpg);"></div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;"></div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD2.jpg)"></div>
<div class="content-phone">家电</div>
<div class="content-phone-content">
<div class="content-phone-content-l">
<div class="content-phone-content-l-0"></div>
<div class="content-phone-content-l-0" style="margin-top:14px"></div>
</div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;">
<div id="content-phone-content-r-0"></div>
<div id="content-phone-content-r-0" style="margin-top:10px;"></div>
</div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD3.jpg)"></div>
<div class="content-phone">智能</div>
<div class="content-phone-content">
<div class="content-phone-content-l">
<div class="content-phone-content-l-0"></div>
<div class="content-phone-content-l-0" style="margin-top:14px"></div>
</div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;">
<div id="content-phone-content-r-0"></div>
<div id="content-phone-content-r-0" style="margin-top:10px;"></div>
</div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD4.jpg)"></div>
</div>
</div>
<!-- 底部部分 -->
<div class="footers">
<div class="footer">底部</div>
</div>
</body>
</html>
