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> </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%; }
img
pass