abstract：HTML部分：<div class="bannerShop"> <div class="bannerh2"> &
HTML部分：
<div class="bannerShop">
<div class="bannerh2">
<h2>智能</h2>
<div class="tab">
<ul>
<li>熱門</li>
<li>電視影音</li>
<li>電腦</li>
<li>家具</li>
</ul>
<span><i class="fa fa-angle-right"></i></span>
</div>
</div>
<div class="clear"></div>
<div class="bannerShop_3 mr10">
<img src="images/buy/家電AD1.jpg" alt="">
</div>
<div class="bannerShop_3 mr10 ra">
<img src="images/buy/家電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>
<p class="hiddentext">
<span class="review">安裝師傅很給力</span>
<span class="review">老徐評(píng)價(jià)安裝很滿意</span>
</p>
</div>
<div class="bannerShop_3 mr10 ra">
<span class="FlagRed">享八折</span>
<img src="images/buy/家電2.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 class="bannerShop_3 mr10 ra">
<span class="Flaggreen">減100元</span>
<img src="images/buy/家電3.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 class="bannerShop_3 mr10 ra">
<img src="images/buy/家電4.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 class="bannerShop_3 mr10 mrt10">
<img src="images/buy/家電AD2.jpg" alt="">
</div>
<div class="bannerShop_3 mr10 mrt10 ra">
<span class="Flaggreen">減100元</span>
<img src="images/buy/家電5.png" 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 class="bannerShop_3 mr10 mrt10 ra">
<img src="images/buy/家電6.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 class="bannerShop_3 mr10 mrt10 ra">
<img src="images/buy/家電7.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 class="bannerShop_4 mr10 mrt10">
<div class="bn_1"></div>
<div class="bn_1 mrt10"></div>
</div>
</div>
<div class="clear"></div>
---------------------------------------------------------------------------------
CSS部分：
/* 公工樣式*/
*{margin: 0px; padding: 0px;}
li{list-style:none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
.mr13{margin-right: 13px;}
.mr10{margin-right: 10px;}
.mrt10{margin-top: 10px;}
.bg{background: red;}
.ra{position:relative;}
/* 閃購 */
.bannerShop{width: 100%;height: 400px;margin: 10px auto;}
.bannerh2{height: 60px;line-height: 60px;}
.bannerh2 h2{font-size: 22px;font-weight: 400;float: left;}
.bannerh2 .tab{float:right;margin-right: 10px;}
.tab span{width: 20px;height: 20px;background: #ccc;line-height: 20px;border-radius: 10px;display: inline-block;text-align: center;color: #fff;margin-left: 10px;}
.tab ul{float: left;top: 16px;position: relative;}
.tab ul li{float: left;margin-right: 15px;height: 28px;line-height: 28px;}
.tab ul li:hover{color: #ff6500;border-bottom: 2px solid #ff6500;}
.bannerShop_0{width: 235px;height: 381px;background: #ccc;border-top: 1px solid red;float: left;}
.bannerShop_1{width: 235px;height: 381px;background: #ccc;border-top: 1px solid red;float:left;}
/* 手機(jī)智能家電 */
.bannerShop_2{width: 235px;height: 381px;float: left;}
.bannerShop_3{width: 235px;height: 300px;float:left;background: #fff;text-align: center;}
.bannerShop_4{width: 235px;height: 300px;float:left;}
.bannerShop_5{width: 235px;height: 610px;float:left;}
.bn_1{width: 235px;height:145px;background: #ccc;float: left}
.bottomImg{width: 160;height: 160px;margin: 20px 37px 18px;}
.bottomTitle{font-size: 14px;margin: 3px 0;font-weight: 300;}
.bottomDesc{font-size: 12px;color: #aaa;margin: 10px 0 15px;}
.bottomPrice{font-size: 13px;}
.FlagRed{width: 64px;height: 18px;line-height: 18px;font-size: 12px;background: red;text-align: center;position: absolute;left:90px; color: #fff;}
.Flaggreen{width: 64px;height: 18px;line-height: 18px;font-size: 12px;background: green;text-align: center;position: absolute;left:90px; color: #fff;}
/* 評(píng)價(jià) */
.hiddentext{width: 174px;height: 40px;padding: 8px 30px;background: #ff6700;color: #fff;position: absolute;font-size: 12px;top: 245px;display: none;}
.bannerShop_3:hover .hiddentext{display: block; -webkit-animation: upmove 1s ease; -o-animation: upmove 1s ease; animation: upmove 1s ease; }
@keyframes upmove { from { top: 265px; opacity: 0; } to { top: 245px;opacity: 1; } }
總結(jié)：
因?yàn)榭焖倮蚣艿臅r(shí)候大多寬高匹配的塊都使用了相同的類，導(dǎo)致后期樣式混用看起來比較混亂，下次規(guī)劃框架名字的時(shí)候要區(qū)域名字明確
Correcting teacher：滅絕師太Correction time：2019-02-26 09:04:41
Teacher's summary：備注很重要哦!特別是大塊面的大型的布局!繼續(xù)加油