摘要：<!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>
<link rel="stylesheet" href="css/best.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="bottom"></div>
</body>
</html>
<!-- 以下是css/best.css 内容 -->
body{margin:0px;padding:0px;}
/* 头部 */
.header{width:100%;background-color: #999999;height:4rem;}
.header nav{width:1226px;height:100%;background-color: #FFC0CB;margin: 0px auto;}
/* 主体 */
.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;}
/* 尾部 */
.bottom{width:100%;height:100px;background-color:#ccc;margin:10px auto;}
