CSS+HTML如何写一个类似于淘宝的简单导航栏？

今天我们来做一个类似于淘宝网站的导航栏，我以天猫超市、聚划算、天猫作为今天的例子
开发工具:VsCode

HTML部分代码

首先我们先理一下编程思路，假设我们要做三个导航栏，我们就要对里面的字体大小、字体颜色、背景颜色等等属性进行一致的设置，所以我们要设置一个父级容器ul，以及里面的三个子元素li，并且每个子元素里分别有一个设置链接的a元素。具体html部分代码如下图：

css部分代码

首先，初始化昂。

*{    margin: 0;   
      padding:0;  
 }

先运行一下，看是什么效果：

哇，是不是感觉很丑，不急，下一步会更好。

淘宝上面的导航栏都是横着的，因为ul和li都是块状元素，所以我们先把这些横起来，这里我们加一个浮动float:left，系统内部就会自动把所有元素都转化成为inline-block（行级块元素），此时就可以横向排列了。（其中float:right和position:absolute也可以使系统内部发生转化）

横向排列完成了，a标签的链接会有下划线，我们不希望有下划线，text-decoration: none即可去除下划线。

设置容器的宽高，并且设置盒子外边距margin使3个容器之间隔着一点距离。

接着设置字体的颜色，淘宝红：#40。字体加粗font-weight: bold;

最后就要设置鼠标移动到链接事件a::hover（其实写a:hover也是可以的，系统会自动把后面那个冒号补上）我们希望鼠标放在链接上时容器背景变“淘宝色”，字体变白色。

css代码如下：

   *{    
     margin: 0;    
     padding:0;  
 }
   .nav{   
 list-style: none;
 }
   a{    
     text-decoration: none;
}
   .nav .list-item{    
    float:left;
    margin:0 10px;    
    height:30px;    
    line-height: 30px;    
    /*border:2px solid violet;*/
    }
    .nav .list-item a{    
    padding:0 5px;    
    color:#f40;    
    font-weight: bold;   
    height:30px;    
    display:inline-block;   
     border-radius:15px;}
     .nav .list-item a:hover{    
     background-color: #f40;    
     color:#fff;
     }

运行效果图：

不要在意上面那条线，那是浏览器的边框。