CSS导航条水平居中

html-css0566

CSS导航条水平居中,第1张

1.需要两个小小的图片，分别用来填充背景与分隔条。

2.编写html代码，用ul、li列表。下面是原代码：（包含效果图）

3.然后开始CSS部分。首先：加背景；其次：将竖直列表变成水平，用float:left就可以实现。相应的CSS代码如下（附效果图）：

4.最后美化一下，给a标签左右2em的间距，同时加上竖线背景（mainNavBorder.jpg）,并弄上:hover时的变化（这里只是让颜色变化） 在上面的CSS基础上，添加如下代码：

1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。

2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。

3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。

4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。

5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。

6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。