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> </body> </html>
css
* {
margin: 0;
vertical-align:middle;
}
.nav {
background-color: black;
font-size: 13px;
}
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;
}
pass