摘要：基本思路: 首先將網(wǎng)頁(yè)內(nèi)容區(qū)較為特殊的小米閃購(gòu)部分的主體內(nèi)容進(jìn)行布局，其中有4個(gè)板塊的內(nèi)容，第一部分是距離開(kāi)場(chǎng)還有多久時(shí)間的部分，這其中有用i標(biāo)簽將圖標(biāo)引用進(jìn)來(lái)，之后三個(gè)搶購(gòu)商品板塊的內(nèi)容較為相似，是引用進(jìn)來(lái)背景圖片以及一些文字并進(jìn)行布局；之后再做出手機(jī)、電視、智能等類(lèi)似板塊的布局；最后將整個(gè)頁(yè)面的局搭起
基本思路:
首先將網(wǎng)頁(yè)內(nèi)容區(qū)較為特殊的小米閃購(gòu)部分的主體內(nèi)容進(jìn)行布局，其中有4個(gè)板塊的內(nèi)容，第一部分是距離開(kāi)場(chǎng)還有多久時(shí)間的部分，這其中有用i標(biāo)簽將圖標(biāo)引用進(jìn)來(lái)，之后三個(gè)搶購(gòu)商品板塊的內(nèi)容較為相似，是引用進(jìn)來(lái)背景圖片以及一些文字并進(jìn)行布局；之后再做出手機(jī)、電視、智能等類(lèi)似板塊的布局；最后將整個(gè)頁(yè)面的局搭起來(lái)即可。
注意事項(xiàng):
1. 在小米閃購(gòu)的倒計(jì)時(shí)內(nèi)，引用圖標(biāo)時(shí)所用到的class方式為“flash fa fa-flash fa-4x s”，之后要用css對(duì)圖標(biāo)做相關(guān)樣式操作時(shí)，在css中使用.flash的class名進(jìn)行樣式布局即可;
2. 在小米閃購(gòu)之后的三個(gè)商品板塊內(nèi)，需要對(duì)其背景顏色進(jìn)行統(tǒng)一設(shè)定，這時(shí)需要在html中添加一行class名為bg的標(biāo)簽，并在css中對(duì)bg進(jìn)行統(tǒng)一設(shè)定。先對(duì)包裹住這一部分內(nèi)容的大div進(jìn)行相對(duì)定位，并在bg中采取絕對(duì)定位。在css中，使用rgba規(guī)定其背景色，即background: rgba(0,0,0,0.02)，并使其寬度和高度均為100%，即可作出類(lèi)似樣式；
3. 在移到圖片上出現(xiàn)評(píng)論時(shí)，若直接使用偽屬性hover不添加任何樣式，會(huì)使其產(chǎn)生的效果不是很美觀，可以通過(guò) @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫(huà)。創(chuàng)建動(dòng)畫(huà)的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。這樣會(huì)使加載商品詳情時(shí)更加美觀。
完整代碼:
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="#">云服務(wù)</a><span>|</span></li> <li><a href="#">小愛(ài)分享平臺(tái)</a><span>|</span></li> <li><a href="#">金融</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">企業(yè)服務(wù)</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="#">注冊(cè)</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> 購(gòu)物車(chē) ( 0 )</a> <div>購(gòu)物車(chē)中還沒(méi)有商品，趕緊選購(gòu)吧！</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">小米手機(jī) <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>服務(wù)</li> <li>社區(qū)</li> </ul> <div class="contentMenu_form"> <form> <input type="text" name=""> <div class="contentMenu_form_a"> <a href="">電視新品</a> <a href="">618預(yù)熱</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="">手機(jī) 電話卡 </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="#">小米移動(dòng) 電話卡</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="#">黑鯊游戲手機(jī)</a></div> <div><img src="static/images/phone/phone18.png"><a href="#">手機(jī)上門(mén)維修</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="#">移動(dòng)4G專(zhuān)區(qū)</a></div> </div> </li> <li><a href="">電視機(jī) 盒子</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="#">鼠標(biāo)/鼠標(biāo)墊</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="#">轉(zhuǎn)接器</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="#">小米筆記本內(nèi)膽包</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="#">掃地機(jī)器人</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="#">掃地機(jī)配件</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="#">小米手環(huán)</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="#">洗手機(jī)</a></div> <div><img src="static/images/healthy/healthy15.jpg"><a href="#">小米監(jiān)控?cái)z像頭</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="#">兒童滑板車(chē)</a></div> <div><img src="static/images/child/child2.jpg"><a href="#">遙控電動(dòng)</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="#">兒童單車(chē)</a></div> <div><img src="static/images/child/child16.jpg"><a href="#">兒童玩具</a></div> <div><img src="static/images/child/child18.jpg"><a href="#">小米手環(huán)</a></div> <div><img src="static/images/child/child17.jpg"><a href="#">兒童相機(jī)</a></div> </div> </li> <li><a href="">路由器 手機(jī)配件 </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="#">手機(jī)殼</a></div> <div><img src="static/images/router/router9.jpg"><a href="#">智能門(mén)鎖</a></div> <div><img src="static/images/router/router18.jpg"><a href="#">打印機(jī)</a></div> </div> </li> <li><a href="">移動(dòng)電源 插線板</a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/battery/battery1.jpg"><a href="#">移動(dòng)電源</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="#">車(chē)充</a></div> <div><img src="static/images/battery/battery10.jpg"><a href="#">自拍桿</a></div> <div><img src="static/images/battery/battery11.jpg"><a href="#">手機(jī)殼</a></div> <div><img src="static/images/battery/battery14.jpg"><a href="#">其他配件</a></div> </div> </li> <li><a href="">耳機(jī) 音箱 </a><i class="fa fa-angle-right"></i> <div class="contentPic_l_Phone"> <div><img src="static/images/earphone/earphone1.jpg"><a href="#">藍(lán)牙耳機(jī)</a></div> <div><img src="static/images/earphone/earphone2.jpg"><a href="#">入耳式耳機(jī)</a></div> <div><img src="static/images/earphone/earphone3.jpg"><a href="#">轉(zhuǎn)換器</a></div> <div><img src="static/images/earphone/earphone5.jpg"><a href="#">k歌耳機(jī)</a></div> <div><img src="static/images/earphone/earphone7.jpg"><a href="#">頭戴耳機(jī)</a></div> <div><img src="static/images/earphone/earphone11.jpg"><a href="#">品牌耳機(jī)</a></div> <div><img src="static/images/earphone/earphone9.jpg"><a href="#">線控耳機(jī)</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="#">藍(lán)牙音箱</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="#">沙發(fā)</a></div> <div><img src="static/images/life/life5.jpg"><a href="#">雙肩包</a></div> <div><img src="static/images/life/life6.jpg"><a href="#">運(yùn)動(dòng)鞋</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>選購(gòu)手機(jī)</li> <li style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企業(yè)團(tuán)購(gòu)</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>話費(fèi)充值</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> <!-- 小米閃購(gòu) --> <div class="contentShop"> <h2>小米閃購(gòu)</h2> <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;background: #f1eded;"> <div class="time">18:00 場(chǎng)</div> <div class="flash fa fa-flash fa-4x s" style="color: #ef3a3b;"></div> <div class="detail">距離開(kāi)始還有</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">大空間，快循環(huán)</p> <p class="picshopPrice"> <span style="color:#ff6709">1399 元</span> <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="">小米手環(huán)2 黑色 </a></h3> <p class="picshopDesc">OLED 顯示屏，觸摸操作</p> <p class="picshopPrice"> <span style="color:#ff6709">149 元</span> <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> <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="">小米體質(zhì)秤 白色 </a></h3> <p class="picshopDesc">簡(jiǎn)約纖薄精準(zhǔn)掌握身體數(shù)據(jù)</p> <p class="picshopPrice"> <span style="color:#ff6709">179 元</span> <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>手機(jī)</h2> <div class="Tab"> 查看全部 <span><i class="fa fa-angle-right"></i></span> </div> </div> <div class="clear"></div> <!-- 手機(jī) --> <div class="contentPhone"> <div class="contentPhone_l"></div> <div class="contentPhone_r"> <div style="margin-right:12.7px;"> <img src="static/images/buy/手機(jī)1.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">小米5X 4G+64GB</a></h3> <p class="bottomDesc">光學(xué)變焦雙攝，拍人更美</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/手機(jī)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/手機(jī)3.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">紅米5A 2GB內(nèi)存</a></h3> <p class="bottomDesc">8天超長(zhǎng)待機(jī)，137g輕巧機(jī)身</p> <p class="bottomPrice"><span style="color: #ff6700;">599元</span></p> </div> <div> <img src="static/images/buy/手機(jī)4.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">紅米5 Plus 3GB+32GB </a></h3> <p class="bottomDesc">全面屏手機(jī)，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/手機(jī)5.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">紅米S2 3GB+32GB </a></h3> <p class="bottomDesc">前置1600萬(wàn)超大像素智能美拍</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/手機(jī)6.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">小米Note 3 4GB+64GB </a></h3> <p class="bottomDesc">1600萬(wàn)美顏?zhàn)耘模?倍變焦雙攝</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/手機(jī)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/手機(jī)8.jpg" class="bottomImg"> <h3 class="bottomTitle"><a href="#">小米Max 2 4GB+64GB </a></h3> <p class="bottomDesc">6.44''大屏，5300mAh 充電寶級(jí)的大電量</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批改老師：滅絕師太批改時(shí)間：2019-03-05 09:22:17
老師總結(jié)：有自己課外拓展,作業(yè)完成的很認(rèn)真,繼續(xù)保持!