/* 设置顶部样式 */
.top-wrapper {
height: 38px;
background-color: #333;
}
/* 为顶部导航栏的字体设置样式 */
.top-wrapper a {
color: #bbb;
text-decoration: none;
}
.inner-wrapper a:hover {
color: #fff;
}
/* 设置内部容器样式 */
.inner-wrapper {
width: 1226px;
margin: 0 auto;
line-height: 38px;
}
/* 设置左侧导航栏 */
.inner-wrapper .left-content li {
float: left;
}
.app{
position: relative;
}
.QR-code{
height:148px;
width:124px;
background-color:orange;
position:absolute;
top:0px;
left:0px;
}
/* 设置右侧导航栏 */
.inner-wrapper .right-content {
float: right;
}
.inner-wrapper .right-content li {
float: left;
}
/* 为"消息通知"单独设置样式 */
.inner-wrapper .right-content li:nth-child(5) {
margin-left: 4px;
margin-right: 24px;
}
/* 设置分割线样式 */
.inner-wrapper .cutting-line {
height: 11px;
width: 2px;
background: linear-gradient(to right, #373c42, #3c3733);
margin: 13px 7px;
}
/* 设置购物车样式 */
.shop-cart{
padding:0 18.69px;
}
.fa-shopping-cart{
margin-right:5px;
}
.shop-cart:hover{
background-color: #fff;
}
.shop-cart a:hover{
color: #FF6700;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小米商城</title>
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/fa/css/all.css" />
<link rel="stylesheet" href="../css/index.css" />
<link rel="stylesheet" href="../css/base.css" />
</head>
<body>
<header>
<!-- 设置外部顶部容器 -->
<div class="top-wrapper">
<!-- 设置内部容器 -->
<div class="inner-wrapper">
<div class="left-content">
<ul>
<li>
<a href="javascript:;"
>小米商城
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>MIUI
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>loT
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>云服务
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>天星数科
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>有品
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>小爱开放平台
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>企业团购
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>资质证照
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>协议规则
<li class="cutting-line"></li
></a>
</li>
<li class="app">
<a href="javascript:;"
>下载app
<div class="QR-code"></div>
<li class="cutting-line"></li>
</a>
</li>
<li>
<a href="javascript:;"
>智能生活
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;">Select Location </a>
</li>
</ul>
</div>
<div class="right-content">
<ul>
<li>
<a href="javascript:;"
>登录
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;"
>注册
<li class="cutting-line"></li
></a>
</li>
<li>
<a href="javascript:;">消息通知 </a>
</li>
<li class="shop-cart">
<a href="javascript:;"
><i class="fas fa-shopping-cart"></i>购物车 (0)
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
