摘要：学习小米商城的框架布局，参照小米商城官方网站进行操作。html代码部分<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> &nbs
学习小米商城的框架布局，参照小米商城官方网站进行操作。
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"> <!--左侧--> <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="#">云服务</a><span></span></li> <li><a href="#">金融</a><span></span></li> <li><a href="#">有品</a><span></span></li> <li><a href="#">小爱开放平台</a><span></span></li> <li><a href="#">企业团购</a><span></span></li> <li><a href="#">资质证照</a><span></span></li> <li><a href="#">协议规则</a><span></span></li> <li><a href="#">下载app</a><span></span></li> <li><a href="#">Select Region</a></li> </ul> </div> <!--右侧--> <div class="header_r"> <ul> <li><a href="#">登录</a><span></span></li> <li><a href="#">注册</a><span></span></li> <li><a href="#">消息通知</a></li> <li><a href="">购物车(0)</a></li> </ul> </div> </div> </div> <div class="wrap"> <!--内容区--> <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> <!--第五排 开始是另外一层--> <div class="layout"> <div class="nva_1"> <!--第一排--> <div class="nva_1_1"><h2>手机</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>热门</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> <!--下面都是相同的重复布局--> </div> </div> </div> <!--底部--> <!--<div></div>--> <div class="footer"> <div class="footer_1"> <div class="footer_1_1"> <a href="">预约维修服务</a> <a href="">7天无理由退货</a> <a href="">15天免费换货</a> <a href="">满150元包邮</a> <a href="">520余家售后网点</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}
/*左侧*/
.header_l ul li{float: left;height: 40px;line-height: 40px;}
/*右侧*/
.header_r ul{float: right;}/*因为直接浮动li标签会造成顺序颠倒 所以直接把整个ul浮动到右侧 里面的li设置左浮动即可达到效果*/
.header_r ul li{float: left;height: 40px;line-height: 40px;}
/*购物车*/
.header_r ul li:last-of-type{margin-left: 10px;padding: 0 10px;background-color: #424242;}
/*内容区*/
.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;}
/*第五排 开始另外一层*/
.layout{background-color: #f5f5f5;width: 100%;/*高度不定义留给下面撑开*/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个设置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个设置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;}
批改老师：天蓬老师批改时间：2019-05-27 09:31:27
老师总结：<div class="nva_3_3">
<ul>
<li></li>
<li></li>
<li></li>
