首页布局分解

摘要：<div class="header"> <div class="headerNav"></div> </div> <div class="contents_top"> <div class="contentTo

<div class="header">
		<div class="headerNav"></div>
	</div>
	<div class="contents_top">
		<div class="contentTop">
			<div class="search">
				
			</div>
			<div class="navPic">
				
			</div>
			<div class="ulPic">
				
			</div>
			<div class="quickBuy">
				<div class="quick_title"></div>
				<div class="quick_desc"></div>
			</div>
			<div class="ad"><a href="#"><img src="static/img/longAD2.jpg"></a></div>
		</div>
	</div>
	<div class="contents_bottom">
		<div class="contentBottom">
			<!--分类 手机-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<div class="ad"><a href="#"><img src="static/img/longAD3.jpg"></a></div>
			<!--分类 家电-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<div class="ad"><a href="#"><img src="static/img/longAD4.jpg"></a></div>
			<!--分类 智能-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<div class="ad"><a href="#"><img src="static/img/longAD5.jpg"></a></div>
			<!--分类 搭配-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<div class="ad"><a href="#"><img src="static/img/longAD6.jpg"></a></div>

			<!--分类 配件-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>

			<div class="ad"><a href="#"><img src="static/img/longAD7.jpg"></a></div>
			<!--分类 周边-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<!--分类 热卖-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<!--分类 内容-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
			<!--分类 视频-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent"></div>
			</div>
		</div>
	</div>
	<div class="site_footer">
		<div class="site_footer_content"></div>
	</div>
	<div class="site_info">
		<div class="site_info_content"></div>
	</div>

*{margin:0px;padding: 0px;}
/*头部*/
.header{width: 100%;height: 39px;border-top: 1px solid #B6B4B6;background-color: #333333;}
.headerNav{width: 1226px;margin:0 auto;}
/*主体上半部*/
.contents_top{width: 100%;}
.contentTop,.contentBottom,.site_footer_content,.site_info_content{width: 1226px;margin:0px auto;}
.contentTop>div{margin: 20px 0px;}
.search{height: 55px;background: #ccc;}
.navPic{height:500px;background: #ccc;}
.ulPic{height: 170px;background: #ccc;}
.quickBuy{height: 382px;background: #ccc;}
/*主体下半部*/
.contents_bottom{width: 100%;background: #F5F5F5;padding-bottom: 30px;}
.contentBottom>div{margin: 20px 0px;}
.productTitle{height: 58px;background: #ccc;}
.productContent{height: 614px;margin-top: 10px;background: #ccc;}
/*底部*/
.site_footer{width: 100%;height: 272px;}
.site_info{width: 100%;height: 182px;background:#F5F5F5;}