html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="stylesheet" href="./小米.css"> </head> <body> <div class="nav clearfix"> <div class="container clearfix"> <ul class="nav-left"> <li id="ll"><a href="">小米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">IoT</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="">Select Region</a></li> </ul> <!--<div class="c2"></div>--> <div class="trolley"><a href="">购物车</a></div> <ul class="nav-right"> <li><a href="">消息通知</a></li> <li><a href="">注册</a></li> <li><a href="">登录</a></li> </ul> </div> </div> <div class="clearfix" id="s1"> <div class="container clearfix" id="s2"> <div id="s3"><img src="img/mi.png" alt=""></div> <div id="s4"><img src="img/biao.png" alt=""></div> <ul id="s5"> <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> <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 id="s6"> <input id="si1" type="image" src="img/button.png"> <input id="si2" type="text"> </div> </div> </div> <div class="clearfix" id="t1"> <div class="container clearfix" id="t2"> <ul id="t3"> <li><span> ></span><a href="">手机 电话卡</a></li> <li><span> ></span><a href="">电视 盒子</a></li> <li><span> ></span><a href="">笔记本</a></li> <li><span> ></span><a href="">智能 家电</a></li> <li><span> ></span><a href="">健康 家居</a></li> <li><span> ></span><a href="">出行 儿童</a></li> <li><span> ></span><a href="">路由器 手机配件</a></li> <li><span> ></span><a href="">移动电源 插线板</a></li> <li><span> ></span><a href="">耳机 音箱</a></li> <li><span> ></span><a href="">生活 米兔</a></li> </ul> <div id="t4"> <img src="img/picture.jpg" alt=""> </div> </div> </div> <div class="clearfix" id="f1"> <div class="container clearfix" id="f2"> <div id="f3"> <ul id="fu1"> <li><a href="">选购手机</a></li> <li><a href="">企业团购</a></li> <li><a href="">F码通道</a></li> </ul> <ul id="fu2"> <li><a href="">米粉卡</a></li> <li><a href="">以旧换新</a></li> <li><a href="">话费充值</a></li> </ul> </div> <div id="f4"> <img src="img/f1.jpg" alt=""> </div> <div id="f5"> <img src="img/f2.jpg" alt=""> </div> <div id="f6"> <img src="img/f3.jpg" alt=""> </div> </div> </div> <div class="clearfix" id="f1"> <div class="container clearfix" id="f2"> <h2>小米闪购</h2> </div> </div> <div class="clearfix" id="v1"> <div class="container clearfix" id="v2"> <div id="v3"> <img src="img/v1.jpg" alt=""> </div> <div id="v4"> <img src="img/v2.jpg" alt=""> </div> <div id="v5"> <img src="img/v3.jpg" alt=""> </div> <div id="v6"> <img src="img/v4.jpg" alt=""> </div> <div id="v7"> <img src="img/v5.jpg" alt=""> </div> </div> </div> <div id="x1">©为发骚而生</div> </body> </html>
css
* { margin: 0; vertical-align:middle; } .nav { background-color: black; font-size: 13px; font-weight:bold; } ul { list-style-type: none; padding: 0; } ul.nav-left > li { float: left; padding: 12px; } /*左对齐*/ #ll{ padding: 12px 12px 12px 0px; } .trolley{ float: right; padding: 12px; background-color: #424242; } ul.nav-right > li { float: right; padding: 12px; } ul a, ul span, .trolley a{ color: #b0b0b0; text-decoration: none; display:block; } .trolley:hover{ background-color: white; } .trolley:hover a{ color:red; } ul a:hover { color: #fff; } /*清除 浮动的副作用*/ .clearfix:after { content: ""; display: block; clear: left; } .container { 1350px; margin: 0 auto; } /*第二行*/ #s5 a:hover { color:red; } #s1{ font-size:15px; font-weight:bold; } #s5>li{ float: left; padding: 10px; margin-top: 22px; } /*第一个图片左对齐*/ #s3, #s4{ float: left; padding: 10px 10px 10px 0px; } #s3 { margin-top: 2px; } #si1, #si2{ float:right; padding: 11px; height:25px; border:1px solid red; margin-top: 18px; } /*第三行*/ #t3{ float: left; background-color: dimgrey; font-size: 15px; font-weight:bold; 16.5%; /*为了缩小多种浏览器显示差距，高度设定值*/ height: 490px; margin-bottom: 5px; margin-top: 5px; border-top:15px solid dimgrey; border-bottom:15px solid dimgrey; } #t3 a{ padding: 15px; color:white; } #t3 span{ float: right; padding: 15px; color:white; } #t3 li:hover{ background: coral; } #t4{ float:right; 83.5%; margin-bottom: 5px; margin-top: 5px; } #t4 img{ /*图片充满整个div*/ 100%; } /*最后一行*/ #x1{ font-family: 楷体; font-size:20px; font-weight:500; margin: 0 auto; text-align: center; padding: 20px; color:#333; } /*第四行*/ #f3{ float: left; background-color: dimgrey; /*font-size: 15px;*/ font-weight:bold; padding: 10px 0px 10px 0px; 16.5%; /*为了缩小多种浏览器显示差距，高度设定值*/ /*height: 490px;*/ margin-bottom: 5px; margin-top: 28px; border-top:15px solid dimgrey; border-bottom:15px solid dimgrey; } #f3 li{ float: left; padding: 24px 12px 21px 12px; 50px; } #f3 a{ font-size: 12px; color: #b0b0b0; height: 14px; } #f4, #f5, #f6{ float: left; padding: 10px 0px 10px 58px; margin-top: 15px; } h2{ font-family: 微软雅黑 Arial; font-weight: 600; padding-top:30px; padding-bottom:30px; } /*第五行*/ #v3,#v4,#v5,#v6,#v7{ float: left; padding: 0px 55px 20px 0px; 225px; } #v7{ padding: 0px 0px 10px 0px; } #v2 img{ 100%; } #v3 img{ border-top: 1px solid red; } #v4 img{ border-top: 1px solid orangered; } #v5 img{ border-top: 1px solid green; } #v6 img{ border-top: 1px solid blue; } #v7 img{ border-top: 1px solid red; }
pass
