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

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

HTML部分代码

首先我们先理一下编程思路,假设我们要做三个导航栏,我们就要对里面的字体大小、字体颜色、背景颜色等等属性进行一致的设置,所以我们要设置一个父级容器ul,以及里面的三个子元素li,并且每个子元素里分别有一个设置链接的a元素。具体html部分代码如下图:
CSS+HTML如何写一个类似于淘宝的简单导航栏?_第1张图片

css部分代码

首先,初始化昂。

*{    margin: 0;   
      padding:0;  
 }

先运行一下,看是什么效果:
CSS+HTML如何写一个类似于淘宝的简单导航栏?_第2张图片
哇,是不是感觉很丑,不急,下一步会更好。

淘宝上面的导航栏都是横着的,因为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;
     }

运行效果图:
在这里插入图片描述
不要在意上面那条线,那是浏览器的边框。

你可能感兴趣的:(html5,css)