小米商城的整体布局

原创 2018-11-17 21:12:59 316
摘要:<!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;}


发布手记

热门词条