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><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> </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; } .trolley{ float: right; padding: 12px; background-color: #424242; } ul.nav-right > li { float: right; padding: 12px; } ul a, .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 { 90%; 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; } #s3 { margin-top: 2px; } #si1, #si2{ float:right; padding: 11px; height:25px; border:1px solid red; margin-top: 18px; }
pass
