网页设计css导航链接怎么做,如何用DIV+CSS制作导航条

一个蓝色主题的导航条布局案例，本CSS小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。

一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。

这样的导航条有以下二部分代码组成。

1、CSS代码：

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}

ul#nav li{display:inline; height:60px}

ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;

color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}

ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=”nav”设置样式才能生效。

以上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。

2、HTML代码

• 首页
• HTML教程
• CSS基础
• CSS开发工具
• CSS特效
• CSS问题

这样就制作好了一个导航条了。

注意事项

在实际DIV+CSS布局项目中，一般不会只使用一次ul li列表，避免干扰其他地方使用ul li布局，避免对ul li设置样式影响其他地方，所以特地这里对ul设置一个#nav命名(一般导航条以nav或menu为CSS命名，这里选择nav)，假如导航条背景宽度100%全屏或固定宽度均可，这里就由ul#nav控制，这里就设置100%全屏宽度蓝色背景。