摘要：html<div class="content-bottom"> <div class="content-bottom1"> <!--手機--> &
html
<div class="content-bottom"> <div class="content-bottom1"> <!--手機--> <h2 class="content-bottom1_li"> 手機 <div class="tab"> 查看更多 <span><i class="fa fa-angle-right"></i></span> </div> </h2> <div class="content-bottom1_shop"> <div class="content-bottom1_shop1"></div> <div class="content-bottom1_shop2"> <div class="content-bottom1_1"> <div class="content-bottom1_a"> <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 class="content-bottom1_b"> <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 class="content-bottom1_c"> <img class="bottomImg" src="./static/img/buy/手機3.jpg" alt=""> <h3 class="bottomTitle"><a href="">紅米5A 2GB內(nèi)存 </a></h3> <p class="bottomDesc">8天超長待機，137g輕巧機身</p> <p class="bottomPrice"> <span style="color:#ff6709">599元</span> </p> </div> <div class="content-bottom1_d"> <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> <div class="content-bottom1_2"> <div class="content-bottom1_e"> <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 class="content-bottom1_f"> <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 class="content-bottom1_g"> <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 class="content-bottom1_h"> <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> <div class="clear"></div> <!--家電--> <div class="content-bottom2_pic"></div> <h2 class="content-bottom2_li"> 家電 <div class="tab"> <ul> <li>熱門</li> <li>電視影音</li> <li>電腦</li> <li>家居</li> </ul> </div> </h2> </div>
CSS
/*導航條*/
.contentMenu{height:66px;margin: 10px auto;}
.contentMenu_pic,.contentMenu_ul{float: left;}
.contentMenu_ul{line-height: 66px;height: 66px;margin-left: 15px;}
.contentMenu_ul li{float: left; margin-right: 10px;font-size: 17px;}
.contentMenu_form{float: right;width: 314px;height: 63px;padding: 6px 0px;position: relative;}
.contentMenu_form input[type="text"]{width: 238px;height: 50px;float: left;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding-left: 10px; }
.botton{border: 1px solid #ccc;width: 60px;height: 50px;float: left;}
.botton i{font-size: 21px;color: #424242;position: absolute;top: 20px;right: 27px;}
.contentMenu_form_a{ width: 110px;position: absolute;top:20px;right: 75px; }
.contentMenu_form_a a{color: #aaa;width: 50px;font-size: 12px;background: #ebebeb;padding: 3px;}
.contentMenu_form a:hover{background: #ff6700;color: #fff;}
.botton:hover{background:#ff6700; width: 62px;height: 52px;border:none; }
.botton:hover i{color: #fff;}
/*
下拉框*/
.MI_phone{width: 100%;height: 230px;background: #fff;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;position: absolute;left: 0px;top:126px;display: none;z-index: 2; }
.MI_phoneDiv{width: 1226px;height: 230px;margin:0px auto;}
.MI_phone1{width: 161px;height: 230px;text-align: center;position: relative;float: left;}
.MI_phone1 a{font-size: 12px;color: #ccc;}
.MI_phone1_shop{width: 120px;height: 160px;line-height:30px;margin-top: 30px;}
.new{width: 60px;height: 18px;font-size: 12px;border: 1px solid #ff6700;color: #ff6700;line-height: 18px;text-align: center;position: absolute;left: 25px;}
.MI_phoneDiv span{width: 0px;border-right: 1px solid #ccc;float: left;height: 80px;margin-top: 30px;margin-right: 45px;}
.contentMenu_ul li:hover .MI_phone{display: block;}
.contentPic{margin: 10px auto;}
/*側(cè)邊導航*/
.contentPic_l{width: 246px;height: 460px;background: #424242;float: left;position: relative;}
.content_pic_ul{width: 246px;height: 440px; margin: 30px 0px;}
.content_pic_ul li{width: 236px;height:40px;line-height: 40px;font-size: 15px;padding-left:10px; }
.content_pic_ul li a{color: #fff;}
.content_pic_ul li i{font-size: 15px;font-weight: bold;float: right;margin-top: 13px;margin-right: 20px;color: #fff;}
.content_pic_ul li:hover{background: #ff6700;}
/*下拉*/
.contentPic_l_menu{width: 800px;height: 460px;background: #fff;position: absolute;top:0px;left: 246px;display: none;z-index: 5;}
.content_pic_ul li:hover .contentPic_l_menu{display: block;}
.contentPic_l_menu div{width: 230px;height: 70px;margin-right:10px;float: left; padding-left: 20px;}
.contentPic_l_menu div img{width: 40px;height: 40px;margin: 15px 0px;float: left; }
.contentPic_l_menu div a{color: #424242;float: left;margin-top: 15px;}
.contentPic_l_menu div:hover a{color:#ff6700;}
批改老師：查無此人批改時間：2019-05-20 09:11:28
老師總結(jié)：完成的不錯，常用的css樣式可以寫到公用文件里，每個項目都可以加載這一個公用文件。繼續(xù)加油。