xiaomi_nav_bar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="xiaomi.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="site-topbar">
<div class="container">
<div class="topbar-nav left">
<ul class="clearfix">
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">IoT</a><span>|</span></li>
<li><a href="">云服务</a><span>|</span></li>
<li><a href="">金融</a><span>|</span></li>
<li><a href="">有品</a><span>|</span></li>
<li><a href="">小爱开放平台</a><span>|</span></li>
<li><a href="">企业团购</a><span>|</span></li>
<li><a href="">资质证照</a><span>|</span></li>
<li><a href="">协议规则</a><span>|</span></li>
<li><a href="">下载app</a><span>|</span></li>
<li><a href="">Select Location</a></li>
</ul>
</div>
<div class="topbar-cart right">
<!--<span class="iconfont"></span>--><i class="fa fa-shopping-cart"></i><span>购物车 (0)</span>
</div>
<div class="topbar-info right">
<a href="">登录</a><span class="item">|</span>
<a href="">注册</a><span class="item">|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
</div>
</body>
</html>
xiaomi.css文件
/*!*加载阿里矢量图标*!*/
/*@font-face {*/
/* font-family: 'iconfont';*/
/* src: url('iconfont.eot');*/
/* src: url('iconfont.eot?#iefix') format('embedded-opentype'),*/
/* url('iconfont.woff2') format('woff2'),*/
/* url('iconfont.woff') format('woff'),*/
/* url('iconfont.ttf') format('truetype'),*/
/* url('iconfont.svg#iconfont') format('svg');*/
/*}*/
/*.iconfont {*/
/* font-family: "iconfont" !important;*/
/* font-size: 16px;*/
/* font-style: normal;*/
/* -webkit-font-smoothing: antialiased;*/
/* -moz-osx-font-smoothing: grayscale;*/
/*}*/
/*清空默认样式*/
* {
margin: 0;
padding: 0;
/*list-style: none;*/
list-style-type: none;
}
a {
text-decoration: none;
}
/*浮动*/
.right {
float: right;
}
.left {
float: left;
}
/*清除浮动*/
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*全局样式*/
body {
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
background-color: #fff;
min-width: 1226px;
}
/*全局居中*/
.container {
width: 1226px;
margin: 0 auto;
background-color: yellow !important;
}
/*头部导航栏*/
.header .site-topbar {
height: 40px;
background-color: #333333;
color: #b0b0b0;
}
.site-topbar .topbar-nav {
width: 800px;
height: 40px;
}
.topbar-nav ul {
/*height: 40px;*/
line-height: 40px;
text-align: center;
}
.topbar-nav ul li {
float: left;
}
.topbar-nav ul li a {
color: #b0b0b0;
display: inline-block;
}
.topbar-nav ul li span {
font-size: 17px;
margin: 0 5px;
color: #424242;
}
.topbar-nav ul li a:hover {
color: #fff;
}
.site-topbar .topbar-info {
width: 150px;
margin-right: 20px;
text-align: center;
line-height: 40px;
/*background-color: yellow;*/
}
.site-topbar .topbar-info a {
color: #b0b0b0;
}
.site-topbar .topbar-info a:hover {
color: #fff;
}
.site-topbar .topbar-info .item {
margin: 0 5px;
color: #424242;
}
.site-topbar .topbar-cart {
width: 120px;
text-align: center;
line-height: 40px;
/*background-color: green;*/
}
.site-topbar .topbar-cart:hover {
background-color: #fff;
color: #ff6700;
}
.site-topbar .topbar-cart i {
margin-right: 5px;
/*vertical-align: -2px;*/
}
