智能下布局练习

摘要：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">光学变焦双摄，拍人更美</p>

                    <p class="bottomPrice"><span style="color: #ff6700;">1499 元</span></p>

                    <p class="hiddentext">

                        <span class="review">安装师傅很给力</span>

                        <span class="review">老徐评价安装很满意</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">光学变焦双摄，拍人更美</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">光学变焦双摄，拍人更美</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">光学变焦双摄，拍人更美</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">光学变焦双摄，拍人更美</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">光学变焦双摄，拍人更美</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">光学变焦双摄，拍人更美</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;}

/* 手机智能家电 */

.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;}

/* 评价 */

.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;  } }

总结：

因为快速拉框架的时候大多宽高匹配的块都使用了相同的类，导致后期样式混用看起来比较混乱，下次规划框架名字的时候要区域名字明确

批改老师：灭绝师太批改时间：2019-02-26 09:04:41
老师总结：备注很重要哦!特别是大块面的大型的布局!继续加油