html部分：
/** * author 阿木木 * date 10/01 14:32 * / `<html> <head> <title>title</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="header"> <div class="middle"> <div class="navlist fl"> <ul> <li><a href="">小米商城</a> </li> <li><a href="">MIUI</a> </li> <li><a href="">米聊</a> </li> <li><a href="">游戏</a> </li> <li><a href="">云服务</a> </li> <li><a href="">金融</a> </li> <li><a href="">问题反馈</a> </li> </ul> </div> <div class="login fr"> <ul> <li><a href="">登录</a> </li> <li><a href="">注册</a> </li> <li> </li> <li class="orange"><a href="">购物车</a> </li> </ul> </div> <div class="clear"></div> </div> </div> <div class="main"> <div class="first"> <div class="logo fl"><a href=""><img src="img/logo_top.png"/></a></div> <div class="menu fl"> <div class="fl"><a href="">小米手机</a></div> <div class="fl"><a href="">红米手机</a></div> <div class="fl"><a href="">智能电视</a></div> <div class="fl"><a href="">笔记本</a></div> <div class="fl"><a href="">智能家电</a></div> <div class="fl"><a href="">路由器</a></div> <div class="fl"><a href="">智能硬件</a></div> <div class="fl"><a href="">服务</a></div> <div class="fl"><a href="">社区</a></div> </div> <div class="search fr"></div> <div class="clear"></div> </div> <div class="second"> <div class="black fl"><a href=""><img src="img/listbanner01.jpg"/></a></div> <div class="clear"></div> </div> <div class="third"> <div class="one fl"> <div class="o fl"><a href=""><img src="img/hjh_01.gif"/></a></div> <div class="o fl"><a href=""><img src="img/hjh_02.gif"/></a></div> <div class="o fl"><a href=""><img src="img/hjh_03.gif"/></a></div> <div class="clear"></div> <div class="o fl"><a href=""><img src="img/hjh_04.gif"/></a></div> <div class="o fl"><a href=""><img src="img/hjh_05.gif"/></a></div> <div class="o fl"><a href=""><img src="img/hjh_06.gif"/></a></div> </div> <div class="two fl"><a href=""><img width="316px 170px" src="img/ban1.jpg"/></a></div> <div class="three fl"><a href=""><img width="316px 170px" src="img/ban2.jpg"/></a></div> <div class="threefour fr"><a href=""><img width="316px 170px" src="img/ban3.jpg"/></a></div> <div class="clear"></div> </div> <div class="four"> <div class="banner1"> <a href=""><img src="img/banner01.jpg"/></a> </div> </div> <div class="five"> <div class="title1 fl">明星单品</div> <div class="title2 fl"> <a href=""><img width="235px 340px" src="img/pinpai6.png"/>小米9</a> <div class="titlemodul1">7月9日-21日享花呗12分期免息</div> <div class="titlemodul2">2999元起</div> </div> <div class="title3 fl"> <a href=""><img width="235px 340px" src="img/pinpai7.png"/>小米CC9</a> <div class="titlemodul1">8月9日-10日，下单立减200元</div> <div class="titlemodul2">1999元</div> </div> <div class="title3 fl"> <a href=""><img width="235px 340px" src="img/pinpai8.png"/>小米壁画电视65英寸</a> <div class="titlemodul1">7月9日，下单立减100元</div> <div class="titlemodul2">6999元</div> </div> <div class="title3 fl"> <a href=""><img width="235px 340px" src="img/pinpai9.png"/>小米MIX3</a> <div class="titlemodul1">10月9日-10日，下单立减100元</div> <div class="titlemodul2">2999元</div> </div> <div class="title2 fr"> <a href=""><img width="235px 340px" src="img/pinpai10.png"/>小米游戏本</a> <div class="titlemodul1">第八代酷睿处理器，双烤不限频不降频</div> <div class="titlemodul2">3599元</div> </div> <div class="clear"></div> </div> <div class="six"> <div class="banner2"> <a href=""> <img src="img/banner02.jpg" /> </a> </div> </div> <div class="seven"> <div class="titlex">热门配件</div> <div class="modue1 fl"><a href=""><img width="235px 300px" src="img/peijian1.jpg"/></a></div> <div class="modue2 fl"> <a href=""><img width="235px 300px" src="img/peijian11.jpg"/>小米无线车充</a> <div class="titlemodul3">169元</div> <div class="titlemodul4">1372人评价</div> </div> <div class="modue2 fl"> <a href=""><img width="235px 300px" src="img/peijian3.jpg"/>小米手机4c 小米4c 智能</a> <div class="titlemodul3">29元</div> <div class="titlemodul4">372人评价</div> </div> <div class="modue2 fl"> <a href=""><img width="235px 300px" src="img/peijian4.jpg"/>红米note4 4x 红米note4x</a> <div class="titlemodul3">19元</div> <div class="titlemodul4">372人评价</div> </div> <div class="modue2 fr"> <a href=""><img width="235px 300px" src="img/peijian5.jpg"/>小米支架式自拍杆</a> <div class="titlemodul3">89元</div> <div class="titlemodul4">372人评价</div> </div> <div class="clear"></div> <div class="modue3 fl"><a href=""><img width="235px 300px" src="img/peijian6.png"/></a></div> <div class="modue4 fl"> <a href=""><img width="235px 300px" src="img/peijian12.jpg"/>九号平衡车</a> <div class="titlemodul3">3999元</div> <div class="titlemodul4">372人评价</div></div> <div class="modue4 fl"> <a href=""><img width="235px 300px" src="img/peijian8.jpg"/>米家随身风扇</a> <div class="titlemodul3">19.9元</div> <div class="titlemodul4">372人评价</div> </div> <div class="modue4 fl"> <a href=""><img width="235px 300px" src="img/peijian9.jpg"/>红米4X高透软胶保护套</a> <div class="titlemodul3">59元</div> <div class="titlemodul4">775人评价</div> </div> <div class="modue5 fr"><a href=""><img width="235px 300px" src="img/hongmin4.png"/></a></div> <div class="modue5 fr"><a href=""><img width="235px 300px" src="img/liulangengduo.png"/></a></div> </div> <div class="clear"></div> </div> </div> <div class="footer"> <div class="middle1"> <ul> <li><a href="">小米商城</a></li> <li><a href="">小米网盟</a></li> <li><a href="">小米移动</a></li> <li><a href="">隐私政策</a></li> </ul> <div class="banquan">却家庭 © 版权所有 2019</div> </div> </div> </body> </html>`css部分
/**全局样式**/ *{ margin: 0px; padding: 0px; } body{ font-size: 14px; } li{ list-style: none; } a{ color: #000; text-decoration: none; } .fl{ float:left; } .fr{ float:right; } .clear{ clear: both; } /**index.html**/ .header{ width:100%; background-color: #333333; margin: 0px auto; } .middle{ height: 40px; width: 1227px; margin: 0px auto; } .navlist{ width:401px; height: 40px; margin: 0px auto; } .navlist ul{ padding: 15px 0px; } .navlist ul li { width: 55px; height: 11px; float: left; text-align: center; line-height: 7px; } .navlist ul li:nth-child(1),.navlist ul li:nth-child(2),.navlist ul li:nth-child(3),.navlist ul li:nth-child(4),.navlist ul li:nth-child(5),.navlist ul li:nth-child(6) { border-right:1px #B0B0B0 solid;} .navlist ul li a{ font-size: 10px; color: #B0B0B0; } .login{ width: 302px; height: 40px; } .login ul{ padding: 15px 0px; } .login ul li{ width: 55px; height:11px; float: left; text-align: center; line-height: 7px; } .login ul li:nth-child(1) {border-right:1px #B0B0B0 solid ;} .login ul li a{ font-size: 10px; color: #B0B0B0; } .main{ width: 100%; height: 2170px; margin: 0px auto; } .first{ width: 1227px; height: 54px; margin: 0px auto; padding-top: 26px; } .logo{ width: 234px; height: 54px; } .menu{ width: 643px; height: 54px; font-size: 15px; margin-top: 20px; } .menu a{ margin-left: 20px; } .search{ height: 54px; width: 310px; } .second{ width: 1227px; height: 460px; background-color: #FFFF00; margin: 23px auto; } .black{ width: 1226px; height: 460px; background-color: black; } .third{ width: 1227px; height: 170px; margin: 17px auto; } .one{ width: 234px; height: 170px; background-color: #FF00FF; } .one.o{ width: 78px; height: 85px; background-color: aqua; } .two{ width: 315px; height: 170px; background-color: #FF00FF; margin-left: 15px; } .three{ width: 315px; height: 170px; background-color: #FF00FF; margin-left: 15px; } .threefour{ width: 315px; height: 170px; background-color: #FF00FF; margin-left: 15px; } .four{ width: 1227px; height: 120px; margin: 22px auto; } .banner1{ height: 120px; width: 1227px; background-color: aqua; } .five{ width: 1227px; height: 400px; margin: 25px auto; } .title1{ width:1227px; height: 59px; background-color: #f5f5f5; font-size: 22px; line-height: 60px; } .titlemodul1{ font-size: 13px; color: #b0b0c0; margin-top: 15px; } .titlemodul2{ font-size: 15px; color: #fe674c; margin-top: 15px; } .title2{ width: 235px; height: 340px; background-color: #F5F5F5; border-top: 1px orange solid; text-align: center; } .title3{ width: 235px; height: 340px; background-color: #F5F5F5; margin-left: 13px; border-top: 1px solid green; text-align: center; } .six{ width: 1227px; height: 120px; margin: 25px auto; } .banner2{ width: 1227px; height: 120px; background-color: #00FFFF; } .seven{ width: 1227px; height: 672px; margin: 20px auto; background-color: #F5F5F5; } .titlex{ font-size: 22px; } .titlemodul3{ font-size: 13px; color: #fe674c; } .titlemodul4{ font-size: 15px; color: #b0b0c0; } .modue1{ margin-top: 28px; background-color: #FAFAFA; width: 235px; height: 300px; text-align: center; } .modue2{ margin-top: 28px; background-color: #FAFAFA; width: 235px; height: 300px; margin-left: 13px; text-align: center; } .modue3{ margin-top: 15px; background-color: #FAFAFA; width: 235px; height: 300px; text-align: center; } .modue4{ margin-top: 15px; background-color: #FAFAFA; width: 235px; height: 300px; margin-left: 13px; text-align: center; } .modue5{ margin-top: 15px; background-color: #FAFAFA; width: 235px; height: 143px; margin-left: 13px; text-align: center; } .footer{ width: 100%; height: 140px; background-color: #fafafa; margin: 0px auto; } .middle1{ width: 260px; height: 140px; background-color: #fafafa; margin: 0px auto; } .middle1 ul{ padding: 50px 0px; } .middle1 ul li{ width: 64px; float: left; font-size: 13px; text-align: center; } .middle1 ul li:nth-child(1),.middle1 ul li:nth-child(2),.middle1 ul li:nth-child(3) { border-right:1px black solid;} .banquan{ font-size: 12px; text-align: center; }效果图：
