HTML+CSS 导航栏float实现-CFANZ编程社区

效果图

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>|</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="">企业团购</a>|</li>
 <li><a href="">资质证照</a>|</li>
 <li><a href="">协议规则</a>|</li>
 <li>
 <a href="" class="app">下载app
 <div class="qrcode">

 <img src="img/OIP-C.jpg">
 小米商城app
 </div>

 </a>|</li>

 <li><a href="">Select Location</a></li>
 </ul>

 <ul class="topright">
 <li class="gwc">󰅹<a href="">购物车(0)</a></li>
 <li><a href="">消息通知</a></li>
 <li><a href="">注册</a>|</li>
 <li><a href="">登录</a>|</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;
}

效果图