摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="D:/my-mi/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="D:/my-mi/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="D:/my-mi/css/style.css">
<script type="text/javascript" src="D:/my-mi/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<header>
<div>头部</div>
</header>
<div>
<div>
<div>
<div>导航</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<div><h2>小米闪购</h2></div>
<div>
<div></div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div><a href="#"></a></div>
</div>
</div>
<div>
<div>
<div>
<div><h2>手机</h2><span>查看全部</span></div>
<div>
<div><a href="#"></a></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>
<div>
<h2>家电</h2>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">电视影音</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家居</a></li>
</ul>
</div>
<div>
<div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>
<div>
<h2>智能</h2>
<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>
</ul>
</div>
<div>
<div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>
<div>
<h2>搭配</h2>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">耳机音箱</a></li>
<li><a href="#">电源</a></li>
<li><a href="#">电池储存卡</a></li>
</ul>
</div>
<div>
<div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>
<div>
<h2>配件</h2>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">保护套</a></li>
<li><a href="#">贴膜</a></li>
<li><a href="#">其他配件</a></li>
</ul>
</div>
<div>
<div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>
<div>
<h2>周边</h2>
<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>
</ul>
</div>
<div>
<div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
</div>
<div><a href="#"></a></div>
<div>为你推荐</div>
<div>热评产品</div>
<div>内容</div>
<div>视频</div>
</div>
</div>
</div>
<footer>底部</footer>
</body>
</html>
/*通用设置*/
*{margin:0px;padding: 0px;}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clear{
clear: both;
}
/*头部*/
header{
width: 100%;
height: 60px;
background-color: #333;
}
header div{
width: 1226px;
height: 60px;
margin:0 auto;
}
/*内容*/
.counts{
width: 100%;
}
/*内容1*/
.counts .count-1{
width: 100%;
overflow: hidden;
background-color: #fff;
}
.centers{
width: 1226px;
margin:0 auto;
overflow: hidden;
}
.centers .meau,.centers .pic,.centers .show,.centers .img-g,.centers .gg{
width: 100%;
margin-top: 10px;
}
.centers .meau{
height: 80px;
background: #555;
}
/*焦点轮播*/
.centers .pic{
overflow: hidden;
}
.pic-l{
width: 246px;
height: 480px;
background: #222;
float: left;
}
.pic-r{
width: 980px;
height: 480px;
background: #ccc;
float: right;
}
.centers .show{
height: 170px;
}
.show-1{
width: 246px;
height: 170px;
float: left;
margin-right: 2px;
background: red;
}
.show-2,.show-3,.show-4{
width: 317px;
height: 170px;
float: left;
margin-left: 9px;
}
.show-2 a,.show-3 a,.show-4 a{
display: block;
width: 317px;
height: 170px;
}
.show-2{
background: url(D:/my-mi/images/midAD1.jpg);
}
.show-3{
background: url(D:/my-mi/images/midAD2.jpg);
}
.show-4{
background: url(D:/my-mi/images/midAD3.jpg);
}
.centers .gg{
overflow: hidden;
}
.gg-1{
height: 30px;
margin:10px 0px;
}
.gg-1 h2{
float: left;
width: 236px;
color: #444;
padding-left: 10px;
}
.gg-2{
height: 340px;
overflow: hidden;
}
.gg-2 .gg-2-1{
width: 246px;
height: 339px;
float: left;
border-top: 1px solid red;
background: #333;
}
.gg-2 .gg-2-2{
width: 980px;
height: 339px;
float: left;
}
.gg-2 ul li{
float: left;
margin-left: 10px;
background: #777;
overflow: hidden;
}
.gg-2 ul li a{
display: block;
width: 235px;
height: 339px;
}
.gg-2 .li-1{
border-top: 1px solid orange;
}
.gg-2 .li-2{
border-top: 1px solid blue;
}
.gg-2 .li-3{
border-top: 1px solid green;
}
.gg-2 .li-4{
border-top: 1px solid red;
}
.centers .img-g{
height: 119px;
background: url(D:/my-mi/images/longAD1.jpg);
margin-bottom: 10px;
}
.centers .img-g a{
display: block;
height: 119px;
}
/*内容2*/
.counts .count-2{
width: 100%;
overflow: hidden;
background-color: #f5f5f5;
}
/*手机部分*/
.count-2 .mobile{
margin-bottom: 10px;
}
.mobile-txt{
height: 30px;
margin-top:20px;
margin-bottom: 10px;
}
.mobile-txt h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.mobile-txt span{
display: block;
float: right;
width: 100px;
height: 30px;
line-height: 30px;
margin-right: 15px;
}
.mobile-but{
height: 614px;
}
.mobile-but-left a{
display: block;
width: 234px;
height: 614px;
float: left;
background: url(D:/my-mi/images/buy/手机AD.jpg);
}
.mobile-but-right{
width: 992px;
height: 614px;
float: left;
}
.mobile-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: #ccc;
}
.count-2-img{
background: url(D:/my-mi/images/longAD2.jpg);
}
/*家电*/
.count-2 .home-appliance{
overflow: hidden;
margin-bottom: 10px;
}
.home-top{
height: 30px;
margin-top:30px;
margin-bottom: 10px;
}
.home-top h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.home-top ul{
float: right;
}
.home-top ul li{
height: 30px;
line-height: 30px;
padding-left: 15px;
float: left;
}
.home-top ul li a{
color: #666;
}
.home-top ul li a:hover{
color: red;
border-bottom: 2px solid red;
}
.home-but{
height: 614px;
}
.home-but-left{
float: left;
}
.home-but-left a{
display: block;
width: 234px;
height: 300px;
}
.home-but-left1{
width: 234px;
height: 300px;
margin-bottom:14px;
background:url(D:/my-mi/images/buy/家电AD1.jpg);
}
.home-but-left2{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/家电AD2.jpg);
}
.home-but-right{
width: 992px;
height: 614px;
float: left;
}
.home-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: #666;
}
.home-but-right .home-last1,.home-last2{
width: 237px;
height: 145px;
margin-bottom: 10px;
}
.home-last1{
background: pink;
}
.home-last2{
background: orange;
}
.count-2-img1{
background: url(D:/my-mi/images/longAD3.jpg);
}
/*内容2，所有放置图片的地方*/
.count-2 .count-2-img,.count-2-img1,.count-2-img2,.count-2-img3,.count-2-img4,.count-2-img5{
height: 119px;
margin-bottom: 10px;
}
.count-2 .count-2-img a,.count-2-img1 a,.count-2-img2 a,.count-2-img3 a,.count-2-img4 a,.count-2-img5 a{
display: block;
height: 119px;
}
/*智能区域*/
.count-2 .smart{
margin-bottom: 10px;
}
.smart-top{
height: 30px;
margin-top:30px;
margin-bottom: 10px;
}
.smart-top h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.smart-top ul{
float: right;
}
.smart-top ul li{
height: 30px;
line-height: 30px;
padding-left: 15px;
float: left;
}
.smart-top ul li a{
color: #666;
}
.smart-top ul li a:hover{
color: red;
border-bottom: 2px solid red;
}
.smart-but{
height: 614px;
}
.smart-but-left{
float: left;
}
.smart-but-left a{
display: block;
width: 234px;
height: 300px;
}
.smart-but-left1{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/智能AD1.jpg);
}
.smart-but-left2{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/智能AD2.jpg);
}
.smart-but-right{
width: 992px;
height: 614px;
float: left;
}
.smart-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: #ccc;
}
.smart-but-right .smart-last1,.smart-last2{
width: 237px;
height: 145px;
margin-bottom: 10px;
}
.smart-last1{
background: pink;
}
.smart-last2{
background: orange;
}
.count-2-img2{
background: url(D:/my-mi/images/longAD4.jpg);
}
/*搭配区域*/
.count-2 .collocation{
overflow: hidden;
margin-bottom: 10px;
}
.collocation-top{
height: 30px;
margin-top:30px;
margin-bottom: 10px;
}
.collocation-top h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.collocation-top ul{
float: right;
}
.collocation-top ul li{
height: 30px;
line-height: 30px;
padding-left: 15px;
float: left;
}
.collocation-top ul li a{
color: #666;
}
.collocation-top ul li a:hover{
color: red;
border-bottom: 2px solid red;
}
.collocation-but{
height: 614px;
}
.collocation-but-left{
float: left;
}
.collocation-but-left a{
display: block;
width: 234px;
height: 300px;
}
.collocation-but-left1{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/搭配AD1.jpg);
}
.collocation-but-left2{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/搭配AD2.jpg);
}
.collocation-but-right{
width: 992px;
height: 614px;
float: left;
}
.collocation-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: red;
}
.collocation-but-right .collocation-last1,.collocation-last2{
width: 237px;
height: 145px;
margin-bottom: 10px;
}
.collocation-last1{
background: pink;
}
.collocation-last2{
background: orange;
}
.count-2-img3{
background: url(D:/my-mi/images/longAD5.jpg);
}
/*配件部分*/
.count-2 .accessories{
margin-bottom: 10px;
}
.accessories-top{
height: 30px;
margin-top:30px;
margin-bottom: 10px;
}
.accessories-top h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.accessories-top ul{
float: right;
}
.accessories-top ul li{
height: 30px;
line-height: 30px;
padding-left: 15px;
float: left;
}
.accessories-top ul li a{
color: #666;
}
.accessories-top ul li a:hover{
color: red;
border-bottom: 2px solid red;
}
.accessories-but{
height: 614px;
}
.accessories-but-left{
float: left;
}
.accessories-but-left a{
display: block;
width: 234px;
height: 300px;
}
.accessories-but-left1{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/配件AD1.jpg);
}
.accessories-but-left2{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/配件AD2.jpg);
}
.accessories-but-right{
width: 992px;
height: 614px;
float: left;
}
.accessories-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: red;
}
.accessories-last1,.accessories-last2{
width: 237px;
height: 145px;
margin-bottom: 10px;
}
.accessories-last1{
background: pink;
}
.accessories-last2{
background: orange;
}
.count-2-img4{
background: url(D:/my-mi/images/longAD6.jpg);
}
/*周边*/
.count-2 .the-surrounding{
margin-bottom: 10px;
}
.surrounding-top{
height: 30px;
margin-top:30px;
margin-bottom: 10px;
}
.surrounding-top h2{
width: 234px;
height: 30px;
color: #444;
line-height: 30px;
float: left;
padding-left: 10px;
}
.surrounding-top ul{
float: right;
}
.surrounding-top ul li{
height: 30px;
line-height: 30px;
padding-left: 15px;
float: left;
}
.surrounding-top ul li a{
color: #666;
}
.surrounding-top ul li a:hover{
color: red;
border-bottom: 2px solid red;
}
.surrounding-but{
height: 614px;
}
.surrounding-but-left{
float: left;
}
.surrounding-but-left a{
display: block;
width: 234px;
height: 300px;
}
.surrounding-but-left1{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/周边AD1.jpg);
}
.surrounding-but-left2{
width: 234px;
height: 300px;
margin-bottom:14px;
background: url(D:/my-mi/images/buy/周边AD2.jpg);
}
.surrounding-but-right{
width: 992px;
height: 614px;
float: left;
}
.surrounding-but-right ul li{
width: 237px;
height: 300px;
float: left;
margin-left:11px;
margin-bottom:14px;
background: red;
}
.surrounding-last1,.surrounding-last2{
width: 237px;
height: 145px;
margin-bottom: 10px;
}
.surrounding-last1{
background: pink;
}
.surrounding-last2{
background: orange;
}
.count-2-img5{
background: url(D:/my-mi/images/longAD7.jpg);
}
/*为你推荐*/
.count-2 .recommended{
height: 400px;
margin-bottom: 10px;
background: orange;
}
/*热评产品*/
.count-2 .high-praise{
height: 400px;
margin-bottom: 10px;
background: orange;
}
/*精彩内容*/
.count-2 .txt{
height: 400px;
margin-bottom: 10px;
background: orange;
}
/*视频*/
.count-2 .video{
height: 400px;
margin-bottom: 10px;
background: orange;
}
/*底部*/
footer{
width: 100%;
height: 100px;
background-color: #fff;
}
