本章节布局练习

摘要：<div class="contents" style="background: #f5f5f5;">                    &nb

<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='contentPhone'>

                <div class='contentPhone_l'></div>

                <div class='contentPhone_r'>

                    <div style="margin-right: 12.7px;">

                        <img class="bottomImg" src="./static/img/buy/手机1.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">小米5X 4GB+64GB </a> </h3>

                        <p class="bottomDesc">光学变焦双摄，拍人更美</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">1499 元</span>

                        </p>

                    </div>

                    <div style="margin-right:12.7px;">

                        <span class="bottomFlagRed">享八折</span>

                        <img class="bottomImg" src="./static/img/buy/手机2.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">小米MIX 2 全陶瓷尊享版 </a></h3>

                        <p class="bottomDesc">全面屏2.0，Unibody 全陶瓷</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">3699元</span>

                            <del>4699 元</del>

                        </p>

                    </div>

                    <div style="margin-right:12.7px;">

                        <img class="bottomImg" src="./static/img/buy/手机3.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">红米5A 2GB内存 </a></h3>

                        <p class="bottomDesc">8天超长待机，137g轻巧机身</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">599元</span>

                        </p>

                    </div>

                    <div>

                        <img class="bottomImg" src="./static/img/buy/手机4.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">红米5 Plus 3GB+32GB </a></h3>

                        <p class="bottomDesc">全面屏手机，4000mAh大电量</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">999元</span>

                        </p>    

                    </div>

                    <div style="margin-right:12.7px;margin-top: 12.7px;">

                        <img class="bottomImg" src="./static/img/buy/手机5.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">红米S2 3GB+32GB </a></h3>

                        <p class="bottomDesc">前置1600万超大像素智能美拍</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">999元</span>

                        </p>

                    </div>

                    <div style="margin-right:12.7px;margin-top: 12.7px;">

                            <img class="bottomImg" src="./static/img/buy/手机6.jpg" alt="">

<h3 class="bottomTitle"><a href="">小米Note 3 4GB+64GB </a></h3>

<p class="bottomDesc">1600万美颜自拍，2倍变焦双摄</p>

<p class="bottomPrice">

<span style="color:#ff6709">1799元</span>

<del>1999元</del>

</p>

                    </div>

                    <div style="margin-right:12.7px;margin-top: 12.7px;">

                        <img class="bottomImg" src="./static/img/buy/手机7.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">红米5 2GB+16GB </a></h3>

                        <p class="bottomDesc">5.7英寸全面屏，前置柔光自拍</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">799元</span>

                        </p>

                    </div>

                    <div style="margin-top: 12.7px;">

                        <img class="bottomImg" src="./static/img/buy/手机8.jpg" alt="">

                        <h3 class="bottomTitle"><a href="">小米Max 2 4GB+64GB </a></h3>

                        <p class="bottomDesc">6.44''大屏，5300mAh 充电宝级的大电量</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">1499元</span>

                            <del>1699元</del>

                        </p>

                    </div>

                </div>

            </div>

            <div class='contentImg' style="background:url(static/img/longAD2.jpg)"></div>

            <div class='contentUL'>

                <h2>家电</h2>

                <div class="tab">

                    查看更多

                    <span><i class="fa fa-angle-right"></i></span>

                </div>

            </div>

            <div class='contentPhone'>

                <div class='contentPhone_0' style="margin-right:12.7px;background: url(static/img/buy/家电AD1.jpg);"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;">

                    <img class="bottomImg" src="./static/img/buy/家电2.jpg" alt="">

                    <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                    <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                    <p class="bottomPrice">

                        <span style="color:#ff6709">1599元</span>

                        <del>1699元</del>

                    </p>

                    <p class="bottomDiscuss">

                        <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                        <span class="bottomAuthor">来自于 1469449791 的评价</span>

                    </p>

                </div>

                <div class='contentPhone_1' style="margin-right:12.7px;">

                    <span class="bottomFlagGreen" style="background: red">减100元</span>

                    <img class="bottomImg" src="./static/img/buy/家电3.jpg" alt="">

                    <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                    <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                    <p class="bottomPrice">

                        <span style="color:#ff6709">1599元</span>

                        <del>1699元</del>

                    </p>

                    <p class="bottomDiscuss">

                        <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                        <span class="bottomAuthor">来自于 1469449791 的评价</span>

                    </p>

                </div>

                <div class='contentPhone_1' style="margin-right:12.7px;">

                    <img class="bottomImg" src="./static/img/buy/家电4.jpg" alt="">

                    <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                    <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                    <p class="bottomPrice">

                        <span style="color:#ff6709">1599元</span>

                        <del>1699元</del>

                    </p>

                    <p class="bottomDiscuss">

                        <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                        <span class="bottomAuthor">来自于 1469449791 的评价</span>

                    </p>

                </div>

                <div class='contentPhone_1'>

                        <img class="bottomImg" src="./static/img/buy/家电4.jpg" alt="">

                        <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                        <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                        <p class="bottomPrice">

                            <span style="color:#ff6709">1599元</span>

                            <del>1699元</del>

                        </p>

                        <p class="bottomDiscuss">

                            <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                            <span class="bottomAuthor">来自于 1469449791 的评价</span>

                        </p>

                    </div>

                <div class='contentPhone_0' style="margin-right:12.7px;margin-top: 12.7px;background: url(static/img/buy/家电AD2.jpg);"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;">

                        <img class="bottomImg" src="./static/img/buy/家电5.png" alt="">

<h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

<p class="bottomDesc">全高清屏 / 人工智能语音</p>

<p class="bottomPrice">

<span style="color:#ff6709">1599元</span>

<del>1699元</del>

</p>

<p class="bottomDiscuss">

<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

<span class="bottomAuthor">来自于 1469449791 的评价</span>

</p>

                    </div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;">

                    <img class="bottomImg" src="./static/img/buy/家电6.jpg" alt="">

                    <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                    <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                    <p class="bottomPrice">

                        <span style="color:#ff6709">1599元</span>

                        <del>1699元</del>

                    </p>

                    <p class="bottomDiscuss">

                        <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                        <span class="bottomAuthor">来自于 1469449791 的评价</span>

                    </p>

                </div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;">

                    <img class="bottomImg" src="./static/img/buy/家电7.jpg" alt="">

                    <h3 class="bottomTitle">小米电视4A 43英寸青春版</h3>

                    <p class="bottomDesc">全高清屏 / 人工智能语音</p>

                    <p class="bottomPrice">

                        <span style="color:#ff6709">1599元</span>

                        <del>1699元</del>

                    </p>

                    <p class="bottomDiscuss">

                        <span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>

                        <span class="bottomAuthor">来自于 1469449791 的评价</span>

                    </p>

                </div>

                <div class='contentPhone_1' style="margin-top: 12.7px;">

                    <div class='contentPhone_1_t'>

                        <img src="./static/img/buy/家电8.jpg" alt="">

                        <p class="bottomTitle">小米净水器</p>

                        <p class="bottomPrice" style="color:#ff6709">1999元</p>

                    </div>  

                    <div class='contentPhone_1_d'>

                        <p class="bottomTitle">浏览更多</p>

                        <p class="bottomDesc">更多</p>

                        <span class="fa fa-arrow-circle-o-right fa-5x" style="color:#ff6700"></span>

                    </div>

                </div>

            </div>

            <div class='contentImg' style="background:url(static/img/longAD3.jpg)"></div>

            <div class='contentUL'>

                    <h2>智能</h2>             

                <div class="tab">

                    <ul>

                        <li>热门</li>

                        <li>电视影音</li>

                        <li>电脑</li>

                        <li>家居</li>

                    </ul>

                </div>

            </div>

            <div class='contentPhone'>

                <div class='contentPhone_0' style="margin-right:12.7px;background: url(static/img/buy/智能AD1.jpg);"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;"></div>

                <div class='contentPhone_1'></div>

                <div class='contentPhone_0' style="margin-right:12.7px;margin-top: 12.7px;background: url(static/img/buy/智能AD2.jpg);"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;"></div>

                <div class='contentPhone_1' style="margin-right:12.7px;margin-top: 12.7px;"></div>

                <div class='contentPhone_2' style="margin-top: 12.7px;">

                    <div class='contentPhone_1_t'></div>

                    <div class='contentPhone_1_d'></div>

                </div>          

            </div>          

            <div class='contentImg' style="background:url(static/img/longAD4.jpg)&

批改老师：韦小宝批改时间：2019-02-12 09:22:54
老师总结：下次像这种太长的代码，并且还引用了一些外部的资源 记得附上个效果图哦！