效果图
html代码
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" >
<link rel="stylesheet" href="base.css">
<title> 小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD,小米电视官方网站</title>
</head>
<body>
<div class="topbig">
<div class="topcenter">
<ul class="topleft" >
<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="" class="app">下载app
<div class="qrcode">
<img src="img/OIP-C.jpg">
<span>小米商城app</span>
</div>
</a><span>|</span></li>
<li><a href="">Select Location</a></li>
</ul>
<ul class="topright">
<li class="gwc"><i class="iconfont">󰅹</i><a href="">购物车(0)</a></li>
<li><a href="">消息通知</a></li>
<li><a href="">注册</a><span>|</span></li>
<li><a href="">登录</a><span>|</span></li>
</ul>
</div>
</div>
</body>
</html>
CSS代码
@charset "utf-8";
/* CSS Document */
.topbig{
width: 100%;
background-color:#333333;
height: 40px;
}
.topcenter{
height: 40px;
width: 1226px;
margin: 0 auto;
}
ul li{
list-style: none;
}
.topleft li{
float: left;
line-height: 40px;
}
.topleft a,.topright a{
font-size: 12px;
color: #b0b0b0;
text-decoration: none;
}
.topleft a:hover{
color: #ffffff;
}
.topleft span,.topright span{
font-size: 10px;
color: #424242;
margin-left: 7px;
margin-right: 7px;
}
.topright li{
float: right;
line-height: 40px;
}
.gwc{
width: 120px;
height: 40px;
background-color: #424242;
text-align: center;
margin-left: 30px;
}
.gwc a:hover{
color: #ff6700;
}
.gwc i{
color:#b0b0b0;
font-size: 18px;
margin-right: 5px;
}
效果图