如何制作一个导航栏

2025-11-09 05:04:18

1、首先要写一个无序列表,并定义导航栏的内容(用div定义),代码和效果如下。

如何制作一个导航栏

如何制作一个导航栏

2、然后在css中定义出导航栏的位置。

如何制作一个导航栏

如何制作一个导航栏

3、在定义li是导航栏浮动上去,并去掉格式,内容前面的小黑圆点(list-style-type:none;)

如何制作一个导航栏

如何制作一个导航栏

4、去下划线:

#nav ul li a{

color:#fff;

text-decoration:none;

}

如何制作一个导航栏

5、鼠标触动栏目字体时变颜色(拿首页做例子):

#nav ul li a:hover{

        line-height:30px;

        color:red;      

}

如何制作一个导航栏

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢