摘要:<!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_ul"></div>
<!-- 小米闪购 -->
<div class="conterShop"></div>
</div>
</div> <!-- end 主体上半部分conters -->
<!-- 尾部 -->
<div class="bottom"></div>
</body>
</html>
body{margin:0px;padding:0px;}
/* 头部 */
.header{width:100%;background-color: #999999;height:4rem;}
.header nav{width:1266px;height:100%;background-color: #FFC0CB;margin: 0px auto;}
/* 主体 */
.conters{width:1266px;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_ul{height:160px;background-color:#999;margin: 10px auto;}
/* 小米闪购 */
.conterShop{height:180px;background-color:#999;margin: 10px auto;}
/* 尾部 */
.bottom{width:100%;height:100px;background-color:#ccc;margin:10px auto;}