小米商城首页主体内容部分布局

Original 2019-03-04 23:16:33 650
abstract:基本思路:        首先将网页内容区较为特殊的小米闪购部分的主体内容进行布局,其中有4个板块的内容,第一部分是距离开场还有多久时间的部分,这其中有用i标签将图标引用进来,之后三个抢购商品板块的内容较为相似,是引用进来背景图片以及一些文字并进行布局;之后再做出手机、电视、智能等类似板块的布局;最后将整个页面的局搭起

基本思路:

        首先将网页内容区较为特殊的小米闪购部分的主体内容进行布局,其中有4个板块的内容,第一部分是距离开场还有多久时间的部分,这其中有用i标签将图标引用进来,之后三个抢购商品板块的内容较为相似,是引用进来背景图片以及一些文字并进行布局;之后再做出手机、电视、智能等类似板块的布局;最后将整个页面的局搭起来即可。

注意事项:

1. 在小米闪购的倒计时内,引用图标时所用到的class方式为“flash fa fa-flash fa-4x s”,之后要用css对图标做相关样式操作时,在css中使用.flash的class名进行样式布局即可;

2. 在小米闪购之后的三个商品板块内,需要对其背景颜色进行统一设定,这时需要在html中添加一行class名为bg的标签,并在css中对bg进行统一设定。先对包裹住这一部分内容的大div进行相对定位,并在bg中采取绝对定位。在css中,使用rgba规定其背景色,即background: rgba(0,0,0,0.02),并使其宽度和高度均为100%,即可作出类似样式;

3. 在移到图片上出现评论时,若直接使用伪属性hover不添加任何样式,会使其产生的效果不是很美观,可以通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。这样会使加载商品详情时更加美观。

完整代码:

html部分:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城</title>
	<link rel="shortcut icon" type="images/x-icon" href="static/images/footlogo.png">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
	<!-- 头部 -->
<div class="header">
	<div class="menu">
		<ul class="header_left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">IOT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">小爱分享平台</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">企业服务</a><span>|</span></li>
                <li><a href="#">SelectRegion</a></li>
        </ul>
            <div class="header_right">
                <ul>
	                <li><a href="#">登录</a><span>|</span></li>
	                <li><a href="#">注册</a><span>|</span></li>
	                <li><a href="shop/order.html">我的订单</a></li>
	                <li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i>&nbsp; 购物车 ( 0 )</a> 
						<div>购物车中还没有商品,赶紧选购吧!</div>
					</li>
               </ul>
            </div>  
	</div>
</div>
	<!-- 主体部分 -->
<div class="contents">
	<div class="content">
		<div class="contentMenu">
			<div class="contentMenu_pic">
				<img src="static/images/footlogo.png" style="margin: 5px 0px;margin-right:10px;">
				<img src="static/images/logoAD.gif">
			</div>
			<ul class="contentMenu_ul">
				<li class="contentMenu_ul_li1">小米手机
					<div class="MI_phone">
						<div class="MI_phoneDiv">
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>红米</li>
				<li>电视</li>
				<li>笔记本</li>
				<li>盒子</li> 
				<li class="contentMenu_ul_li1">新品
					<div class="MI_phone">
						<div class="MI_phoneDiv">
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>路由器</li>
				<li>智能硬件</li>
				<li>服务</li>
				<li>社区</li>
			</ul>
			<div class="contentMenu_form">
				<form>
					<input type="text" name="">
					<div class="contentMenu_form_a"> <a href="">电视新品</a> <a href="">618预热</a></div>
					<div class="contentMenu_form_button"><i class="fa fa-search"></i></div>
				</form>
			</div>
		</div>
		<div class="clear"></div>
	
		<div class="contentPic">
			<div class="contentPic_l">
				<ul class="content_pic_ul">
						<li><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
								<div><img src="static/images/phone/phone1.png"><a href="#">小米MIX 2S</a></div>
								<div><img src="static/images/phone/phone2.png"><a href="#">红米6A</a></div>
								<div><img src="static/images/phone/phone12.jpg"><a href="#">米粉卡 日租卡</a></div>
								<div><img src="static/images/phone/phone3.png"><a href="#">小米8</a></div>
								<div><img src="static/images/phone/phone4.jpg"><a href="#">小米6X</a></div>
								<div><img src="static/images/phone/phone15.jpg"><a href="#">小米移动 电话卡</a></div>
								<div><img src="static/images/phone/phone5.jpg"><a href="#">红米Note 4</a></div>
								<div><img src="static/images/phone/phone7.png"><a href="#">黑鲨游戏手机</a></div>
								<div><img src="static/images/phone/phone18.png"><a href="#">手机上门维修</a></div>
								<div><img src="static/images/phone/phone8.png"><a href="#">红米Note 5</a></div>
								<div><img src="static/images/phone/phone13.png"><a href="#">小米9</a></div>
								<div><img src="static/images/phone/phone6.jpg"><a href="#">移动4G专区</a></div>
							</div>
						</li>
						<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
								<div><img src="static/images/tv/tv1.jpg"><a href="#">小米电视4A 65英寸</a></div>
								<div><img src="static/images/tv/tv2.jpg"><a href="#">小米电视4X 55英寸</a></div>
								<div><img src="static/images/tv/tv3.jpg"><a href="#">小米电视4S 55英寸</a></div>
								<div><img src="static/images/tv/tv4.jpg"><a href="#">小米电视4C 32英寸</a></div>
								<div><img src="static/images/tv/tv5.jpg"><a href="#">小米电视4 55英寸</a></div>
								<div><img src="static/images/tv/tv6.jpg"><a href="#">小米电视4S 65英寸</a></div>
								<div><img src="static/images/tv/tv7.jpg"><a href="#">小米电视4C 43英寸</a></div>
								<div><img src="static/images/tv/tv8.jpg"><a href="#">小米电视4C 50英寸</a></div>
								<div><img src="static/images/tv/tv9.jpg"><a href="#">小米电视4S 32英寸</a></div>
								<div><img src="static/images/tv/tv10.png"><a href="#">小米电视4S 65英寸PRO</a></div>
								<div><img src="static/images/tv/tv11.jpg"><a href="#">小米电视4S 50英寸</a></div>
								<div><img src="static/images/tv/tv12.jpg"><a href="#">小米盒子</a></div>
							</div>
						</li>
						<li><a href="">笔记本 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/pc/pc4.jpg"><a href="#">小米笔记本 15.6''</a></div>
							<div><img src="static/images/pc/pc7.jpg"><a href="#">小米笔记本 13.3''</a></div>
							<div><img src="static/images/pc/pc6.png"><a href="#">鼠标/鼠标垫</a></div>
							<div><img src="static/images/pc/pc9.jpg"><a href="#">小米笔记本 12.5''</a></div>
							<div><img src="static/images/pc/pc10.jpg"><a href="#">小米游戏本</a></div>
							<div><img src="static/images/pc/pc5.jpg"><a href="#">转接器</a></div>
							<div><img src="static/images/pc/pc7.jpg"><a href="#">小米笔记本 15.6''</a></div>
							<div><img src="static/images/pc/pc11.jpg"><a href="#">小米笔记本内胆包</a></div>
							<div><img src="static/images/pc/pc2.jpg"><a href="#">小米充电头</a></div>
							</div>
						</li>
						<li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/machine/machine8.jpg"><a href="#">剃须刀</a></div>
							<div><img src="static/images/machine/machine3.jpg"><a href="#">扫地机器人</a></div>
							<div><img src="static/images/machine/machine4.jpg"><a href="#">净水器</a></div>
							<div><img src="static/images/machine/machine12.jpg"><a href="#">净水器滤芯</a></div>
							<div><img src="static/images/machine/machine5.jpg"><a href="#">空气净化器</a></div>
							<div><img src="static/images/machine/machine7.jpg"><a href="#">扫地机配件</a></div>
							<div><img src="static/images/machine/machine10.jpg"><a href="#">电水壶</a></div>
							<div><img src="static/images/machine/machine11.jpg"><a href="#">电饭煲</a></div>
							<div><img src="static/images/machine/machine15.jpg"><a href="#">电磁炉</a></div>
							
							</div>
						</li>
						<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/healthy/healthy3.jpg"><a href="#">小米手环</a></div>
							<div><img src="static/images/healthy/healthy1.jpg"><a href="#">剃须刀</a></div>
							<div><img src="static/images/healthy/healthy4.jpg"><a href="#">小米摄像头</a></div>
							<div><img src="static/images/healthy/healthy5.jpg"><a href="#">小米手表</a></div>
							<div><img src="static/images/healthy/healthy13.jpg"><a href="#">体重秤</a></div>
							<div><img src="static/images/healthy/healthy16.jpg"><a href="#">牙刷</a></div>
							<div><img src="static/images/healthy/healthy6.jpg"><a href="#">洗手机</a></div>
							<div><img src="static/images/healthy/healthy15.jpg"><a href="#">小米监控摄像头</a></div>
							</div>
						</li>
						<li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/child/child1.jpg"><a href="#">儿童滑板车</a></div>
							<div><img src="static/images/child/child2.jpg"><a href="#">遥控电动</a></div>
							<div><img src="static/images/child/child6.jpg"><a href="#">儿童手表</a></div>
							<div><img src="static/images/child/child10.jpg"><a href="#">益智积木</a></div>
							<div><img src="static/images/child/child13.jpg"><a href="#">早教启智</a></div>
							<div><img src="static/images/child/child12.jpg"><a href="#">儿童单车</a></div>
							<div><img src="static/images/child/child16.jpg"><a href="#">儿童玩具</a></div>
							<div><img src="static/images/child/child18.jpg"><a href="#">小米手环</a></div>
							<div><img src="static/images/child/child17.jpg"><a href="#">儿童相机</a></div>
							</div>
						</li>
						<li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/router/router1.jpg"><a href="#">路由器</a></div>
							<div><img src="static/images/router/router2.jpg"><a href="#">智能家庭</a></div>
							<div><img src="static/images/router/router6.jpg"><a href="#">手机壳</a></div>
							<div><img src="static/images/router/router9.jpg"><a href="#">智能门锁</a></div>
							<div><img src="static/images/router/router18.jpg"><a href="#">打印机</a></div>
							</div>
						</li>
						<li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/battery/battery1.jpg"><a href="#">移动电源</a></div>
							<div><img src="static/images/battery/battery2.jpg"><a href="#">电池</a></div>
							<div><img src="static/images/battery/battery3.jpg"><a href="#">接线板</a></div>
							<div><img src="static/images/battery/battery4.jpg"><a href="#">充电头</a></div>
							<div><img src="static/images/battery/battery5.jpg"><a href="#">充电器</a></div>
							<div><img src="static/images/battery/battery8.jpg"><a href="#">车充</a></div>
							<div><img src="static/images/battery/battery10.jpg"><a href="#">自拍杆</a></div>
							<div><img src="static/images/battery/battery11.jpg"><a href="#">手机壳</a></div>
							<div><img src="static/images/battery/battery14.jpg"><a href="#">其他配件</a></div>
							</div>
						</li>
						<li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/earphone/earphone1.jpg"><a href="#">蓝牙耳机</a></div>
							<div><img src="static/images/earphone/earphone2.jpg"><a href="#">入耳式耳机</a></div>
							<div><img src="static/images/earphone/earphone3.jpg"><a href="#">转换器</a></div>
							<div><img src="static/images/earphone/earphone5.jpg"><a href="#">k歌耳机</a></div>
							<div><img src="static/images/earphone/earphone7.jpg"><a href="#">头戴耳机</a></div>
							<div><img src="static/images/earphone/earphone11.jpg"><a href="#">品牌耳机</a></div>
							<div><img src="static/images/earphone/earphone9.jpg"><a href="#">线控耳机</a></div>
							<div><img src="static/images/earphone/earphone15.jpg"><a href="#">小米AL音箱</a></div>
							<div><img src="static/images/earphone/earphone16.jpg"><a href="#">蓝牙音箱</a></div>
							</div>
						</li>
						<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/life/life1.jpg"><a href="#">旅行箱</a></div>
							<div><img src="static/images/life/life2.jpg"><a href="#">服饰</a></div>
							<div><img src="static/images/life/life4.png"><a href="#">沙发</a></div>
							<div><img src="static/images/life/life5.jpg"><a href="#">双肩包</a></div>
							<div><img src="static/images/life/life6.jpg"><a href="#">运动鞋</a></div>
							<div><img src="static/images/life/life7.jpg"><a href="#">伞</a></div>
							<div><img src="static/images/life/life8.png"><a href="#">枕头</a></div>
							<div><img src="static/images/life/life11.jpg"><a href="#">螺丝刀</a></div>
							<div><img src="static/images/life/life15.jpg"><a href="#">米兔</a></div>
							</div>
						</li>
					</ul>
			</div>
			<div class="contentPic_r"></div>
		</div>
		<div class="clear"></div>
	
		<div class="contentPic_ul">
			<div class="contentPic_ul_1">
				<ul>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-mobile-phone fa-2x"></span>选购手机</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企业团购</li>
                    <li><span class="fa fa-facebook fa-2x"></span>F码通道</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-file-text fa-2x"></span>米粉卡</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-refresh fa-2x"></span>以旧换新</li>
                    <li><span class="fa fa-credit-card fa-2x"></span>话费充值</li>
                </ul>

			</div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD1.jpg);margin-right:13px;"></div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD2.jpg);margin-right:13px;"></div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD3.jpg);"></div>
		</div>
		<!-- 小米闪购 -->
		<div class="contentShop">
			<h2>小米闪购</h2>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;background: #f1eded;">
				<div class="time">18:00 场</div>
				<div class="flash fa fa-flash fa-4x s" style="color: #ef3a3b;"></div>
				<div class="detail">距离开始还有</div>
				<div class="clock">
					<span class="hour">00</span>
					<span class="maohao">:</span>
					<span class="minute">00</span>
					<span class="maohao">:</span>
					<span class="second">00</span>
				</div>
			</div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid orange;">
				<img class="picshopImg" src="static/images/flashbuy/flashbuy1.jpg" alt="">
                <h3 class="picshopTitle"><a href="">米家空气净化器Pro 白色 </a></h3>
                <p class="picshopDesc">大空间,快循环</p>
                <p class="picshopPrice">
                    <span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;
                    <del>1499元</del>
                </p>
                <div class="bg"></div>
			</div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid green;">
				<img class="picshopImg" src="static/images/flashbuy/flashbuy2.jpg" alt="">
                <h3 class="picshopTitle"><a href="">小米手环2 黑色 </a></h3>
                <p class="picshopDesc">OLED 显示屏,触摸操作</p>
                <p class="picshopPrice">
                    <span style="color:#ff6709">149 元</span>&nbsp;&nbsp;
                    <del>159元</del>
                </p>
                <div class="bg"></div>
			</div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid blue;">
				<img class="picshopImg" src="static/images/flashbuy/flashbuy3.jpg" alt="">
                <h3 class="picshopTitle"><a href="">90分金属旅行箱 银色 </a></h3>
                <p class="picshopDesc">航空系铝镁合金</p>
                <p class="picshopPrice">
                    <span style="color:#ff6709">1699 元</span>&nbsp;&nbsp;
                    <del>1799元</del>
                </p>
                <div class="bg"></div>
			</div>
			<div class="contentShop_1" style="border-top:1px solid purple;">
				<img class="picshopImg" src="static/images/flashbuy/flashbuy4.jpg" alt="">
                <h3 class="picshopTitle"><a href="">小米体质秤 白色 </a></h3>
                <p class="picshopDesc">简约纤薄精准掌握身体数据</p>
                <p class="picshopPrice">
                    <span style="color:#ff6709">179 元</span>&nbsp;&nbsp;
                    <del>199元</del>
                </p>
                <div class="bg"></div>
			</div>
		</div>
		<div class="clear"></div>

		<div class="contentImg" style="background:url(static/images/longAD1.jpg)"></div>
	</div>
</div>

<div class="contents" style="background: #f5f5f5;">
	<div class="content">
		<div class="contentUL">
			<h2>手机</h2>
			<div class="Tab">
			查看全部
			<span><i class="fa fa-angle-right"></i></span>
			</div>
		</div>
		<div class="clear"></div>

		<!-- 手机 -->
		<div class="contentPhone">
			<div class="contentPhone_l"></div>
			<div class="contentPhone_r">
				<div style="margin-right:12.7px;">
					<img src="static/images/buy/手机1.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">小米5X 4G+64GB</a></h3>
					<p class="bottomDesc">光学变焦双摄,拍人更美</p>
					<p class="bottomPrice"><span style="color: #ff6700;">1499元</span></p>
				</div>
				<div style="margin-right:12.7px;">
					<span class="bottomFlagRed">享八折</span>
					<img src="static/images/buy/手机2.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">小米MIX 2 全陶瓷尊享版 </a></h3>
					<p class="bottomDesc">全面屏2.0,Unibody 全陶瓷</p>
					<p class="bottomPrice">
						<span style="color: #ff6700;">3759元</span>
						<del>4699 元</del>
					</p>
				</div>
				<div style="margin-right:12.7px;">
					<img src="static/images/buy/手机3.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">红米5A 2GB内存</a></h3>
					<p class="bottomDesc">8天超长待机,137g轻巧机身</p>
					<p class="bottomPrice"><span style="color: #ff6700;">599元</span></p>
				</div>
				<div>
					<img src="static/images/buy/手机4.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">红米5 Plus 3GB+32GB </a></h3>
					<p class="bottomDesc">全面屏手机,4000mAh大电量</p>
					<p class="bottomPrice"><span style="color: #ff6700;">999元</span></p>
				</div>
				<div style="margin-right:12.7px;margin-top:12.7px;">
					<img src="static/images/buy/手机5.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">红米S2 3GB+32GB </a></h3>
					<p class="bottomDesc">前置1600万超大像素智能美拍</p>
					<p class="bottomPrice"><span style="color: #ff6700;">999元</span></p>
				</div>
				<div style="margin-right:12.7px;margin-top:12.7px;">
					<img src="static/images/buy/手机6.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">小米Note 3 4GB+64GB </a></h3>
					<p class="bottomDesc">1600万美颜自拍,2倍变焦双摄</p>
					<p class="bottomPrice"><span style="color: #ff6700;">1999元</span></p>
				</div>
				<div style="margin-right:12.7px;margin-top:12.7px;">
					<img src="static/images/buy/手机7.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">红米5 2GB+16GB</a></h3>
					<p class="bottomDesc">7英寸全面屏,前置柔光自拍</p>
					<p class="bottomPrice"><span style="color: #ff6700;">799元</span></p>
				</div>
				<div style="margin-top:12.7px">
					<img src="static/images/buy/手机8.jpg" class="bottomImg">
					<h3 class="bottomTitle"><a href="#">小米Max 2 4GB+64GB </a></h3>
					<p class="bottomDesc">6.44''大屏,5300mAh 充电宝级的大电量</p>
					<p class="bottomPrice"><span style="color: #ff6700;">1699元</span></p>
				</div>
			</div>
		</div>
	
		<!-- 家电 -->
		<div class="contentImg" style="background:url(static/images/longAD2.jpg);"></div>
		<div class="contentUL"><h2>家电</h2>
			<div class="tab">
                  &a					

Correcting teacher:灭绝师太Correction time:2019-03-05 09:22:17
Teacher's summary:有自己课外拓展,作业完成的很认真,继续保持!

Release Notes

Popular Entries