摘要：學(xué)習(xí)小米商城的框架布局，參照小米商城官方網(wǎng)站進(jìn)行操作。html代碼部分<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> &nbs
學(xué)習(xí)小米商城的框架布局，參照小米商城官方網(wǎng)站進(jìn)行操作。
html代碼部分
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>小米商城布局</title> <link rel="stylesheet" href="static/css/index.css"> </head> <body> <!--頭部--> <div class="header"> <div class="content"> <!--左側(cè)--> <div class="header_l"> <ul> <li><a href="#">小米商城</a><span></span></li> <li><a href="#">MIUI</a><span></span></li> <li><a href="#">loT</a><span></span></li> <li><a href="#">云服務(wù)</a><span></span></li> <li><a href="#">金融</a><span></span></li> <li><a href="#">有品</a><span></span></li> <li><a href="#">小愛(ài)開(kāi)放平臺(tái)</a><span></span></li> <li><a href="#">企業(yè)團(tuán)購(gòu)</a><span></span></li> <li><a href="#">資質(zhì)證照</a><span></span></li> <li><a href="#">協(xié)議規(guī)則</a><span></span></li> <li><a href="#">下載app</a><span></span></li> <li><a href="#">Select Region</a></li> </ul> </div> <!--右側(cè)--> <div class="header_r"> <ul> <li><a href="#">登錄</a><span></span></li> <li><a href="#">注冊(cè)</a><span></span></li> <li><a href="#">消息通知</a></li> <li><a href="">購(gòu)物車(chē)(0)</a></li> </ul> </div> </div> </div> <div class="wrap"> <!--內(nèi)容區(qū)--> <div class="main"> <!--第一排--> <div class="nva_1"></div> <!--第二排--> <div class="nva_2"></div> <!--第三排--> <div class="nva_3"> <div class="nva_3_1"></div> <div class="nva_3_2"></div> </div> <!--第四排--> <div class="nva_4"></div> </div> <!--第五排 開(kāi)始是另外一層--> <div class="layout"> <div class="nva_1"> <!--第一排--> <div class="nva_1_1"><h2>手機(jī)</h2></div> <!--第二排--> <div class="nva_1_2"><img src="" alt=""></div> <div class="nva_1_3"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="clear"></div> <!--第三排--> <div class="nva_2"></div> <!--第四排--> <div class="nva_3"> <div class="nva_3_1"> <h2>家電</h2> <ul> <li>熱門(mén)</li> <li>電視影音</li> <li>電腦</li> <li>家具</li> </ul> </div> <div class="nva_3_2"> <ul> <li></li> <li></li> </ul> </div> <div class="nva_3_3"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="clear"></div> <!--下面都是相同的重復(fù)布局--> </div> </div> </div> <!--底部--> <!--<div></div>--> <div class="footer"> <div class="footer_1"> <div class="footer_1_1"> <a href="">預(yù)約維修服務(wù)</a> <a href="">7天無(wú)理由退貨</a> <a href="">15天免費(fèi)換貨</a> <a href="">滿(mǎn)150元包郵</a> <a href="">520余家售后網(wǎng)點(diǎn)</a> </div> </div> <div class="footer_2"></div> </div> </body> </html>
css代碼部分
*{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: #A9A9A9;font-size: 12px;}
a:hover{color: white;}
.main > div{margin-top: 5px;}
.layout > div{width: 1226px;margin: 0 auto;}
.clear{clear: both;}
/*頭部*/
.header{background-color: #333;}
.header .content{width: 1226px;height: 40px;margin: 0 auto;}
.header .content span{border-right: 1px solid #424242;font-size: 12px;margin: 0 5px}
/*左側(cè)*/
.header_l ul li{float: left;height: 40px;line-height: 40px;}
/*右側(cè)*/
.header_r ul{float: right;}/*因?yàn)橹苯痈?dòng)li標(biāo)簽會(huì)造成順序顛倒 所以直接把整個(gè)ul浮動(dòng)到右側(cè) 里面的li設(shè)置左浮動(dòng)即可達(dá)到效果*/
.header_r ul li{float: left;height: 40px;line-height: 40px;}
/*購(gòu)物車(chē)*/
.header_r ul li:last-of-type{margin-left: 10px;padding: 0 10px;background-color: #424242;}
/*內(nèi)容區(qū)*/
.main{margin: 0 auto; width: 1226px;}
/*第一排*/
.main .nva_1{height: 100px;width: inherit;background-color: #A9A9A9;}
/*第二排*/
.main .nva_2{height: 460px;width: inherit;background-color: #A9A9A9;}
/*第三排*/
.main .nva_3{height: 170px;width: inherit;/*background-color: #A9A9A9;*/}
.main .nva_3 .nva_3_1{width: 234px;height: inherit;background-color: #A9A9A9;float: left;}
.main .nva_3 .nva_3_2{width: 978px;height: inherit;background-color: #A9A9A9;float: right;}
/*第四排*/
.main .nva_4{width: inherit;height: 120px;background-color: #A9A9A9;}
/*第五排 開(kāi)始另外一層*/
.layout{background-color: #f5f5f5;width: 100%;/*高度不定義留給下面撐開(kāi)*/margin-top: 10px;}
/*第一排*/
.layout .nva_1 h2{padding: 10px 0;}
/*第二排*/
.layout .nva_1_2{width: 234px;height: 614px;background-color: lightcoral;float: left;}
.layout .nva_1_3{width: 992px;height: 614px;/*background-color: lightsalmon;*/float: right;}
.layout .nva_1_3 li{width: 234px;height: 300px;background-color: lightcoral;float: left;margin-left: 14px;}
.layout .nva_1_3 li:nth-of-type(4) ~ li{margin-top: 14px;/*只把下面的4個(gè)設(shè)置top外邊距*/}
/*第三排*/
.layout .nva_2{width: inherit;height: 120px;background-color: #A9A9A9;margin-top: 20px;}
/*第四排*/
.layout .nva_3 {margin-top: 20px;}
.layout .nva_3 .nva_3_1 {width: 1226px;height: 58px;}
.layout .nva_3 .nva_3_1 h2{float: left;}
.layout .nva_3 .nva_3_1 ul{float: right;}
.layout .nva_3 .nva_3_1 li{float: left;margin-left: 10px;height: 58px;line-height: 58px}
.layout .nva_3 .nva_3_2 ul{float: left;}
.layout .nva_3 .nva_3_2 li{width: 234px;height: 300px;background-color: #A9A9A9;}
.layout .nva_3 .nva_3_2 li:last-of-type{margin-top: 10px;}
.layout .nva_3 .nva_3_3{float: left;/*background-color: #AF3434;*/width: 992px;height: 610px;}
.layout .nva_3 .nva_3_3 li{width: 234px;height: 300px;background-color: #A9A9A9;float: left;margin-left: 14px}
.layout .nva_3 .nva_3_3 li:nth-of-type(4) ~ li{margin-top: 10px;/*只把下面的4個(gè)設(shè)置top外邊距*/}
.layout .nva_3 .nva_3_3 li:last-of-type,.layout .nva_3 .nva_3_3 li:nth-last-of-type(2){height:145px;width: 234px; }
/*底部*/
.footer .footer_1{width: 100%;height: 272px;}
.footer .footer_1 .footer_1_1{width: 1226px;height: 80px;margin: 0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}
.footer .footer_1 .footer_1_1 a{font-size: 1.5rem;height: 80px;line-height: 80px;}
.footer .footer_1 .footer_1_1 a:first-of-type ~ a{margin-left: 50px;}
批改老師：天蓬老師批改時(shí)間：2019-05-27 09:31:27
老師總結(jié)：<div class="nva_3_3">
<ul>
<li></li>
<li></li>
<li></li>
