怎样用DIV+CSS制作的横排导航栏
网页中的导航栏菜单需要综合运用Div+CSS的知识，那么怎样制作属于自己的网页导航栏，菜单栏呢？
操作方法
- 01
首先，书写一个div标签，并且在这个div标签添加一个类，类名可以自定义，这里我就把类名设置为.mynav。 然后在div里面嵌套了ul，ul里面嵌套了li，li标签存放的是菜单的内容，这里我就设置5个菜单。 然后每个给每个li添加带有超链接的菜单选项。
- 02
接着来预览下最初的效果。
- 03
然后我们要清除所有标签的margin和padding，所以要使用通配符*。
- 04
接着开始设置.mynav的属性。如图，我设置它的宽度为1000px，高度为50px。这个宽高可以自己设置。 然后使用设置margin为0 auto,让div可以在网页居中显示，更加美观。并且我给div添加了一个蓝色的背景色。
- 05
这样就会得出如图所示的效果。
- 06
接着设置ul的属性list-style为none。
- 07
这样菜单前面的小圆点就会消失不见了。
- 08
接着设置li标签的属性float为left。
- 09
这样菜单就会浮动起来，变成横排的了。
- 10
接着来设置a标签的属性，我们把a标签的下划线去掉，这就要使用text-decoration属性。 然后我们把a标签转成块级元素，这样菜单就可以撑满整个div了。 而父级元素高度是1000px，所以5个菜单的平均宽度就是200px。接着我们使用text-align：center让文字水平居中，line-height：50px 让文字垂直居中。 并且我们设置文本的颜色color为白色white。 字体大小为26像素。
- 11
这样，导航栏基本完成。
- 12
接着我们再来对a标签使用伪类hover，来增加一些交互性。a:hover {background:red;}表示鼠标经过菜单时，a标签的背景颜色变成红色。
- 13
如图，这就是鼠标停留在菜单栏的效果。
- 14
说了这么多，最后就是大家最期待的导航栏菜单栏的源代码了。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .mynav{ width: 1000px; height: 50px; margin: 0 auto; background: blue; } ul{ list-style: none; } li{ float: left; } a{ text-decoration: none; display: block; width: 200px; height: 50px; text-align: center; line-height: 50px; color: white; font-size: 26px; } a:hover{ background: red; } </style> </head> <body> <div class="mynav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">通知</a></li> <li><a href="#">资讯</a></li> <li><a href="#">热点</a></li> </ul> </div> </body> </html>