摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="sta
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/font/css/font-awesome.min.css">
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<title>小米商城练习</title>
</head>
<body>
<!-- 头部 -->
<div>
<div>头部导航</div>
</div>
<!-- 主体部分 -->
<div>
<div>主体顶部导航部分</div>
<!-- 主体竖导航部分 -->
<div>
<div></div>
<div></div>
</div>
<div></div>
<!-- 栏目分类部分 -->
<div>
<div>栏目分类</div>
<div style="background:url(static/img/midAD1.jpg)"></div>
<div style="background:url(static/img/midAD2.jpg)"></div>
<div style="background:url(static/img/midAD3.jpg)"></div>
</div>
<div></div>
<!-- 小米闪购部分 -->
<div>
<h2 style="text-align:left;">小米闪购</h2>
<div style="margin-right :12px; border-top:1px solid red;"></div>
<div style="margin-right :12px; border-top:1px solid red;"></div>
<div style="margin-right :12px; border-top:1px solid blue;"></div>
<div style="margin-right :12px; border-top:1px solid green;"></div>
<div style="border-top:1px solid red;"></div>
</div>
<div></div>
<div style="background:url(static/img/longAD1.jpg)"></div>
</div>
<div >
<!-- 手机商品列表部分 -->
<div>
<div>
<h2 style="float:left;display:block;">手机</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<img src="static/img/buy/手机AD.jpg">
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;"></div>
</div>
</div>
<div></div>
<div style="background:url(static/img/longAD2.jpg)"></div>
<div>
<div>
<h2 style="float:left;display:block;">智能</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<div><img src="static/img/buy/家电AD1.jpg"></div>
<div style="margin-top:9px;">
<img src="static/img/buy/家电AD2.jpg">
</div>
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;">
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>
</div>
<div></div>
<div style="background:url(static/img/longAD3.jpg)"></div>
<div>
<div>
<h2 style="float:left;display:block;">家电</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<div><img src="static/img/buy/智能AD1.jpg"></div>
<div style="margin-top:9px;">
<img src="static/img/buy/智能AD2.jpg">
</div>
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div style="margin-right:12.5px;"></div>
<div></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;">
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>
</div>
<div></div>
<div style="background:url(static/img/longAD4.jpg)"></div>
</div>
<!-- 底部 -->
<div>
<div>
<div>
<!-- ************************顶部1****************************** -->
<div>
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<span></span>
<!-- **************************顶部2***************************** -->
<div>
<div>
<dl>
<dt>帮助中心</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="">售后政策</a></dd>
<dd><a href="">自助服务</a></dd>
<dd><a href="">相关下载</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验店</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投资者关系</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官网微博</a></dd>
<dd><a href="">联系我们</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="">F码通道</a></dd>
<dd><a href="">礼物码</a></dd>
<dd><a href="">防伪查询</a></dd>
</dl>
</div>
<div>
<p>Feir-520-1314</p>
<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>
<div ><button><span class="fa fa-commenting "></span> 联系客服</button></div>
</div>
</div>
</div>
<div></div>
<!-- **************************页脚中部*********************************** -->
<div style="height:100px;width:1225px;background-color:blue;">页脚中部</div>
<!-- ************************页脚底部************************************** -->
<div><h3>探索黑科技，小米为发烧而生！</h3></div>
</div>
</div>
</body>
</html>
*{margin:0px;padding: 0px;}
a{text-decoration: none;}
li{list-style: none;float: left;cursor: pointer;}
.clear{clear: both;}
/*头部信息样式：*/
.head{width: 100%;background-color: #333333;}
.head_menu{width:1225px;
height: 30px;
border:1px solid #000;
background-color: #ccc;
margin:0px auto;
line-height: 30px;
text-align: center;
}
/*主体上部白色背景部分样式：*/
.contents1{
width: 100%;
background-color: #fff;
margin-top: 10px;
}
/*主体导航部分*/
.contents1_menu{
width: 1225px;
height: 80px;
background-color: #fff;
border:1px solid #000;
margin:0px auto;
}
/*主体竖导航部分*/
.contents1_menu2{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_menu2_l{
width:240px;
height: 462px;
background-color: #393939;
float: left;
}
.contents1_menu2_r{
width: 980px;
height: 462px;
background-color: blue;
float: right;
}
/*主体分类部分*/
.contents1_column{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_column_l{
width: 240px;
height: 170px;
float: left;
background-color:#5F5750;
}
.contents1_column_r{
width:318px;
height: 170px;
background-color: #ccc;
float: left;
margin-left: 10px;
}
/*主体小米闪购部分*/
.contents1_shop{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_shop_1{
width: 235px;
height: 380px;
float: left;
background-color: #ccc;
}
/*图片部分*/
.contents_img{
width: 1225px;
height: 100px;
margin: 0px auto;
margin-top: 10px;
background-color: #393939;
}
/*主体下部灰色背景部分样式：*/
.contents2{width: 100%;background-color: #ccc;margin-top: 10px;}
/*商品列表部分*/
.contents_comlist{
width: 1225px;
margin: 0px auto;
margin-top: 10px;
}
.contents_comlist_t{
width: 100%;
height:70px;
line-height: 70px;
}
.contents_comlist_l{
float: left;
width:234px;
height: 614px;
}
.contents_comlist_r{
float: right;
height: 610px;
width: 978px;
}
.contents_comlist_r_1,.contents_comlist_r_0{
width: 235px;
height: 300px;
float: left;
background-color:#fff;
}
.contents_comlist_l_t .contents_comlist_l_b{
width: 236px;
height: 303px;
}
.contents_comlist_r_2{
width: 235px;
height: 145px;
background-color: blue;
}
/*底部信息样式：*/
.bottom{width: 100%;background-color: #fff;}
/*底部内容部分*/
.botton_con{
width: 1225px;
height: 200px;
margin: 0px auto;
margin-top: 10px;
}
.botton_con_t_1{
width:1225px;
line-height: 60px;
font-size: 15px;
text-align: center;
}
.botton_con_t_1 a{
font-size: 15px;
color: #616161;
margin:auto 58px;
}
.botton_con_t_1 a:hover{
color: #FF6700;
}
.botton_con_t_1 a i{
font-size: 20px;
margin-right: 10px;
}
.botton_con_t_1 a i:hover{
color: #FF6700;
}
.botton_con_t_1 span{
width: 0px;
height: 25px;
border-right: 1px solid #ccc;
}
.botton_con_line{
width: 1225px;
border-bottom: 1px solid #ccc;
display: inline-block;
}
.botton_con_t_21{
}
.botton_con_t_21 dl{
float: left;
margin-right: 100px;
margin-top: 30px;
}
.botton_con_t_21 dt{
color: #424242;
font-size: 14px;
margin-bottom: 20px;
}
.botton_con_t_21 dd{
margin-bottom: 7px;
}
.botton_con_t_21 dd a{
color: #757575;
font-size: 11px;
}
.botton_con_t_21 dd a:hover{
color: #FF6700;
}
.botton_con_t_22{
border-left: solid 1px #ccc;
height: 113px;
width: 260px;
float: right;
margin-top: 35px;
}
.botton_con_t_22_t{
font-size: 20px;
color: #FF6700;
line-height: 30px;
text-align: center;
}
.botton_con_t_22_c{
font-size: 10px;
color: #616161;
line-height: 16px;
text-align: center;
}
.botton_con_t_22_b{
text-align: center;
margin-top: 10px;
}
.botton_con_t_22_b button{
color: #FF6700;
border:1px solid #FF6700;
background: #fff;
width: 117px;
height: 28px;
font-size: 11px;
}
.botton_con_t_22_b button:hover{
background: #FF6700;
color: #fff;
font-size: 11px;
}
