小米商城首页布局

摘要：<div class="contents_bottom"> <div class="contentBottom"> <!--分类 手机--> <div class="product"> <div class=&q

<div class="contents_bottom">
		<div class="contentBottom">
			<!--分类 手机-->
			<div class="product">
				<div class="productTitle">
					手机
				</div>
				<div class="productContent">
					<div class="phone_l"><a href=""><img src="static/img/buy/手机AD.jpg"></a></div>
					<div class="phone_r">
						<div></div>
						<div></div>
						<div></div>
						<div class="phone_r_1"></div>
						<div style="margin-top:14px;"></div>
						<div style="margin-top:14px;"></div>
						<div style="margin-top:14px;"></div>
						<div class="phone_r_1" style="margin-top:14px;"></div>
					</div>
				</div>
				<div class="clear"></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 class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top" style="margin-right: 0px;">
						<div class="last_t"></div>
						<div class="last_b"></div>
					</div>
				</div>
				<div class="clear"></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 class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top" style="margin-right: 0px;">
						<div class="last_t"></div>
						<div class="last_b"></div>
					</div>
				</div>
				<div class="clear"></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 class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top" style="margin-right: 0px;">
						<div class="last_t"></div>
						<div class="last_b"></div>
					</div>
				</div>
				<div class="clear"></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 class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top" style="margin-right: 0px;">
						<div class="last_t"></div>
						<div class="last_b"></div>
					</div>
				</div>
				<div class="clear"></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 class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top"></div>
					<div class="comm top" style="margin-right: 0px;">
						<div class="last_t"></div>
						<div class="last_b"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<!--分类 为你推荐-->
			<div class="product">
				<div class="productTitle">
					为你推荐
				</div>
				<div class="productContent">
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm"></div>
					<div class="comm" style="margin-right: 0px;"></div>
				</div>
				<div class="clear"></div>
			</div>
			<!--分类 热卖-->
			<div class="product">
				<div class="productTitle">
					热卖产品
				</div>
				<div class="productContent">
					<div class="hotProd" style="margin-right: 14px;"></div>
					<div class="hotProd" style="margin-right: 14px;"></div>
					<div class="hotProd" style="margin-right: 14px;"></div>
					<div class="hotProd" style="margin-right: 0px;"></div>
				</div>
				<div class="clear"></div>
			</div>
			<!--分类 内容-->
			<div class="product">
				<div class="productTitle">
					
				</div>
				<div class="productContent">
					<div class="hotProd" style="margin-right: 14px;border-top: 1px solid #FFAC13;"></div>
					<div class="hotProd" style="margin-right: 14px;border-top: 1px solid #83C44E;"></div>
					<div class="hotProd" style="margin-right: 14px;border-top: 1px solid #E53935;"></div>
					<div class="hotProd" style="margin-right: 0px;border-top: 1px solid #2196F3;"></div>
				</div>
				<div class="clear"></div>
			</div>
			<!--分类 视频-->
			<div class="product">
				<div class="productTitle">
					视频
				</div>
				<div class="productContent">
					<div class="video" style="margin-right: 14px;"></div>
					<div class="video" style="margin-right: 14px;"></div>
					<div class="video" style="margin-right: 14px;"></div>
					<div class="video"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>

/*主体下半部(从小米闪购开始)*/
.contents_bottom{width: 100%;background: #F5F5F5;padding: 30px 0px;}
.contentBottom>div{margin: 20px 0px;}
.productTitle{height: 58px;background: #ccc;}
.productContent{margin-top: 10px;}
/*手机*/
.phone_l{width: 234px;height: 614px;float: left;background: red;}
.phone_r{width: 978px;height: 614px;float: left;margin-left:14px;}
.phone_r>div{width: 234px;height: 300px;float: left;background: #ccc;margin-right: 14px;}
.phone_r .phone_r_1{margin-right: 0px;}
/*家电*/
.comm{width: 234px;height: 300px;float: left;background: #ccc;margin-right: 14px;}
.top{margin-top: 14px;}
.last_t,.last_b{width: 234px;height: 143px;background: red;}
.last_t{margin-bottom: 14px;}
/*热卖产品*/
.hotProd{width: 296px;height: 415px;float: left;background: #ccc;}
/*视频*/
.video{width: 296px;height: 285px;float: left;background: #ccc;}