abstract：html部分 <div class="contents" style="background:#f5f5f5;"> <div class="content"> <!-- 手机 --> <div class="content-ph
html部分
<div class="contents" style="background:#f5f5f5;">
<div class="content">
<!-- 手机 -->
<div class="content-phone-text">
<h2>手机</h2>
<div class="tab">
查看更多
<span><i class="fa fa-angle-right"></i></span>
</div>
</div>
<div class="clear"></div>
<div class="content-phone">
<div class="content-phone-l"></div>
<div class="content-phone-r">
<div style="margin-right:12.7px;">
<img src="images/buy/手机1.jpg" alt="" 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;">
<div style="margin-right:12.7px;">
<span class="bottomFlag-red">享八折</span>
<img src="images/buy/手机2.jpg" alt="" 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>
<div style="margin-right:12.7px;">
<div style="margin-right:12.7px;">
<img src="images/buy/手机3.jpg" alt="" 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>
<div>
<div style="margin-right:12.7px;">
<span class="bottomFlag-red">享八折</span>
<img src="images/buy/手机4.jpg" alt="" 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>
<div style="margin-right:12.7px; margin-top: 12.7px">
<div style="margin-right:12.7px;">
<img src="images/buy/手机5.jpg" alt="" 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>
<div style="margin-right:12.7px; margin-top: 12.7px">
<div style="margin-right:12.7px;">
<img src="images/buy/手机6.jpg" alt="" 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>
<div style="margin-right:12.7px; margin-top: 12.7px">
<div style="margin-right:12.7px;">
<img src="images/buy/手机7.jpg" alt="" 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>
<div style="margin-top:12.7px;">
<div style="margin-right:12.7px;">
<img src="images/buy/手机8.jpg" alt="" 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>
</div>
</div>
<div class="content-img" style="background:url(images/longAD2.jpg)"></div>
<!-- 智能 -->
<div class="content-phone-text">
<h2>智能</h2>
<div class="tab" style="margin-right:1px;">
<ul>
<li>热门</li>
<li>电视影音</li>
<li>电脑</li>
<li>家居</li>
</ul>
</div>
</div>
<div class="content-phone">
<div class="content-phone-0" style="margin-right:12.7px; background: url(images/buy/智能AD1.jpg)"></div>
<div class="content-phone-1" style="margin-right:12.7px;">
<img src="images/buy/智能1.png" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-1" style="margin-right:12.7px;">
<img src="images/buy/智能2.jpg" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-1" style="margin-right:12.7px;">
<img src="images/buy/智能3.jpg" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-1">
<img src="images/buy/智能4.png" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-0"
style="margin-right:12.7px; margin-top: 12.7px;background:url(images/buy/智能AD2.jpg)"></div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px">
<img src="images/buy/智能5.jpg" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px">
<img src="images/buy/智能6.jpg" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px">
<img src="images/buy/智能7.jpg" alt="" 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="bottomDiscuss">
<span class="bottomReview">安装师傅很给力，很专业，产品质量也很高，非常值得信赖。</span>
<span class="bottomAuthor">来自于 1469449791 的评价</span>
</p>
</div>
<div class="content-phone-2">
<div class="content-phone-2-desc">
<p style="margin-left:39px;" class="content-phone-2-d">小米AR</p>
<br>
<p style="margin-left:-39px;color:#ff6700;">2999元</p>
<img src="images/buy/智能8.jpg" alt="">
</div>
<div style="margin-top:12px;">
<div class="content-phone-2-desc">
<p style="margin-left:20px; font-size: 18px; margin-top: 49px;" class="content-phone-2-d">浏览更多</p>
<br>
<p style="margin-left:-75px; padding-top: 2px; color: #ccc;" >更多</p>
<span class="fa fa-arrow-circle-o-right fa-4x" style="color:#ff6700"></span>
</div>
</div>
<!-- <div class="content-phone-2-desc" style="margin-top:12px;">
<p style="margin-left:39px;" class="content-phone-2-d">小米AR</p>
<br>
<p style="margin-left:-39px;color:#ff6700;">2999元</p>
<img src="images/buy/智能8.jpg" alt="">
</div> -->
</div>
<div class="clear"></div>
</div>
<div class="content-img" style="background:url(images/longAD3.jpg)"></div>
<!-- 家电 -->
<div class="content-phone-text">
<h2>家电</h2>
<div class="tab" style="margin-right:1px;">
<ul>
<li>热门</li>
<li>电视影音</li>
<li>电脑</li>
<li>家居</li>
</ul>
</div>
</div>
<div class="content-phone">
<div class="content-phone-0" style="margin-right:12.7px; background: url(images/buy/家电AD1.jpg)"></div>
<div class="content-phone-1" style="margin-right:12.7px;"></div>
<div class="content-phone-1" style="margin-right:12.7px;"></div>
<div class="content-phone-1" style="margin-right:12.7px;"></div>
<div class="content-phone-1"></div>
<div class="content-phone-0"
style="margin-right:12.7px; margin-top: 12.7px;background:url(images/buy/家电AD2.jpg)"></div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px"></div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px"></div>
<div class="content-phone-1" style="margin-right:12.7px; margin-top: 12.7px"></div>
<div class="content-phone-2">
<div></div>
<div style="margin-top:12px;"></div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD4.jpg)"></div>
</div>
</div>
css 部分 老师不好意思 html css 写的太多，不知道拷贝的对不对
.content-img{margin: 10px auto;height: 100px;}
.content-phone-text{margin: 10px auto;height: 60px;line-height: 60px;}
.content-phone-text h2{font-size: 22px;font-weight: 400;float: left;}
.content-phone-text .tab{float: right;margin-right: 30px;position: relative;}
.content-phone-text span{background: #ccc;border-radius: 50%;display: block;width: 20px;height: 20px;position: absolute;top:20px;left: 76px;}
.content-phone-text span i{position: absolute;left:8px;top: 2px;color: #fff;}
.content-phone-text .tab ul{height: 30px;margin: 15px 0;}
.content-phone-text .tab ul li{float: left;margin-left: 15px;height: 30px;line-height: 30px;}
.content-phone-text .tab ul li:hover{color: #ff6700;border-bottom: 4px solid #ff6700;}
.content-phone{margin: 10 auto;height: 614px;}
.content-phone-l{background: url(../images/buy/手机AD.jpg);width: 234px; height: 614px;float: left; margin-right: 12px;}
.content-phone-r{ width: 980px; height: 614px;float: left; }
.content-phone-r div{background: #fff;width: 235.4px;height: 300.2px;float: left;text-align: center;position: relative;}
.bottomImg{width: 160px;height: 160px;margin: 20px 37px 18px;}
.bottomTitle{font-size: 14px;margin:3px 0;font-weight: 300; }
.bottomTitle a:hover{color: #666;}
.bottomDesc{font-size: 12px;color: #aaa;margin: 10px 0 15px;}
.bottomPrice{font-size: 13px;}
.bottomFlag-red{font-size: 12px;background: red;color: #fff;padding: 2px 15px;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.content-phone-0,.content-phone-1{width: 235px;height: 300px;background: #fff;
float: left;text-align: center;position: relative;}
.content-phone-2{float: left;margin-top:12.7px;}
.content-phone-2 .content-phone-2-desc p{float: left; margin-top: 55px;font-size: 12px;
}
.content-phone-2 .content-phone-2-desc img{float:right;}
.content-phone-2 .content-phone-2-desc span{margin: 20px 0 0 30px;}
.content-phone-2 div{height:144px;width:235px;background: #fff;}
.bottomDiscuss{width: 174px;height: 40px;padding: 8px 30px;background: #ff6700; color: #fff;position: absolute;font-size: 12px;top: 245px;display: none;}
.content-phone-1:hover .bottomDiscuss{display: block;animation: upmove 1s ease;}
@keyframes upmove{
from{
top: 265px;
opacity: 0;
}
to{
top: 245px;
opacity: 1;
}
}
Correcting teacher：天蓬老师Correction time：2019-05-15 13:35:48
Teacher's summary：下次提交的时候, 只需要提交核心代码, 就可以了, 现在代码是不完整的