摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城的实现</title>
<link rel="stylesheet" href="css/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城的实现</title>[object Object]
<link rel="stylesheet" href="css/best.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- 导航栏 -->
<nav>
</nav>
</div> <!-- end 头部导航栏 header -->
<!-- 主体上半部分 -->
<div class="conters">
<div class="conter">
<!-- 菜单栏 -->
<div class="conterMenu"></div>
<!-- 图片 -->
<div class="conterPic"></div>
<!-- 图片列表 -->
<div class="conterPic-li">
<div class="conterPic-li_1"></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 小米闪购 -->
<div class="conter-picshop">
<h2 class="conter-picshop1">小米闪购</h2>
<div class="conter-picshop2">
<div class="conter-picshop3" style="border-top:1px solid pink;"></div>
<div class="conter-picshop4" style="border-top:1px solid red;"></div>
<div class="conter-picshop5" style="border-top:1px solid yellow;"></div>
<div class="conter-picshop6" style="border-top:1px solid blue;"></div>
<div class="conter-picshop7" style="border-top:1px solid azure;"></div>
</div>
</div>
<div style="clear: both;"></div>
<!-- 图片 -->
<div class="conter-pic"></div>
</div>
</div> <!-- end 主体上半部分conters -->
<!-- 尾部 -->
<div class="footer cle">
<ul class="cle">
<li><a href=""><i class="fa fa-address-book"></i><div><strong>免运费</strong><br><span>全场满HK$150</span></div></a></li>
<li><a href=""><i class="fa fa-address-book"></i><div><strong>顺丰极速</strong><br><span>横跨港九</span></div></a></li>
<li><a href=""><i class="fa fa-address-book"></i><div><strong>企业国际通道</strong><br><span>企业国际通道</span></div></a></li>
<li><span style="padding-left:80px">关注我们</span><i class="fa fa-address-book"></i><i class="fa fa-address-book"></i><i class="fa fa-address-book"></i></li>
</ul>
<div class="footer_conter " >
<div class="container cle">
<dl>
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>手机延保注册</dd>
<dd>产品防伪查询</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>手机延保注册</dd>
<dd>产品防伪查询</dd>
<dd>产品防伪查询</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>手机延保注册</dd>
<dd>产品防伪查询</dd>
<dd>产品防伪查询</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>手机延保注册</dd>
<dd>产品防伪查询</dd>
<dd>产品防伪查询</dd>
<dd>产品防伪查询</dd>
</dl>
<dl>
<dt>线下零售点</dt>
<dd>小米之家</dd>
<dd>小米专卖店</dd>
</dl>
<dl>
<dt>3001-1888</dt>
<dd>服务时间09:00-18:00周一至周日 含节假日</dd>
<dd><button type="button">联系在线客服</button></dd>
</dl>
</div>
<!-- 下面部分的虚线框和div -->
<div class="container_line">
<p>2018www.mi.com旗下网站：小米网MIUI繁体台湾 简体中文 English</p>
<a href="">选择其他语言></a>
</div>
</div>
</div>
</body>
</html>
/* 以下是best.css文件中的css代码 */
body , ul ,li {margin:0px;padding:0px;}
li {list-style: none;}
a {text-decoration: none;}
/* 头部 */
.header{width:100%;background-color: #999999;height:4rem;}
.header nav{width:1226px;height:100px;margin: 0px auto;background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#000));}
/* 主体 */
.conters{width:1226px;margin:10px auto;}
/* 菜单 */
.conterMenu{width:100%;height:48px;background-color:#999;margin:10px auto;}
/* 图片 */
.conterPic{height:200px;background-color:#999;margin:10px auto;}
/* 图片ul列表 */
.conterPic-li{height:170px;margin: 10px auto;}
.conterPic-li div:first-child{width: 235px;background-color: #9999EE;}
.conterPic-li div{height:100%;width:316px;margin-right:14.3px;background-color: #9999EE;float: left;}
.conterPic-li div:last-child{margin-right: 0;}
/* 小米闪购 */
.conter-picshop{margin: 10px auto;}
.conter-picshop1{height: 56px;}
.conter-picshop2{height:180px;}
.conter-picshop2 div{width:235px;margin-right:12.7px;background-color: #999;height: 100%;float: left;}
.conter-picshop2 div:last-child{margin-right: 0px;}
/*图片 */
.conter-pic{height: 119px;background-color:#999;margin:10px auto;}
/* 尾部 */
.footer{margin:20px auto;}
.footer ul {width:1226px;margin:0 auto;margin-bottom:20px;}
.footer ul li {float:left;font-size:14px;}
.footer ul li:last-child{margin-left: 100px;border-left:1px solid #999;height:40px;line-height: 40px;}
.footer ul li:last-child i {padding-left:30px;}
.footer ul a {color:#999;display: block;padding-left:90px;}
.footer ul a div {display: inline-block;}
.footer ul a i {width:40px;height:37px;float: left;font-size:36px;padding-top: 3px;padding-right: 20px;}
.footer ul a:hover{color:orange}
.footer ul a:hover strong {color:#444;}
/* 尾部的内容样式 */
.footer_conter{background-color:#111;color:#999;}
.container {width:1226px;margin: 0 auto;}
.container dl {float: left;width:155px;margin-right:40px;}
.container dl dt {padding:20px 0;}
.container dl dd {padding:0px;margin: 0px;padding-top:10px;}
.container dl:last-child {width:200px;margin-right: 0px;}
.container dl:last-child dt {font-size:30px;color:#fff;text-align: center;}
.container dl:last-child dd {font-size:10px;color:#999;text-align: center;padding-top:0px;}
.container dl:last-child button{background-color:#111;border:1px solid #fff;width:120px;height:32px;color:#fff;margin-top:20px;}
/* 虚线部分 */
.container_line {height:120px;display: flex;align-items: center;justify-content:space-between;width:1226px;margin: 0 auto;border-top:1px solid #999 ;font-size: 12px;}
.container_line a {color:#999;}
/* 清楚浮动，且占位的类 */
.cle:after{
content: "";display: block;clear: both;width: 100%;
}
