如何用DIV+CSS做漂亮的横排导航栏
1、先码好导航栏所需要的基本的HTML代码这个就不必多说具体的代码如下：<html><head><title>横向导航栏</title><style><!----></style></head><body><div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> <li><a href="#">导航6</a></li> </ul></div></body></html>测试结果应为下图（1）
3、接下来我们让他居中。我们在样式中加入以下代码。.nav ul{width:980px;/*设置元素宽度为980px*/border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/}测试结果应为图3。
5、接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。.nav ul li a{width:80px;/*设置元素宽为80px*/height:28px;/*设置高度为28px*/line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/background:red;/*设置元素的背景为红色*/color:#FFF;/*文字颜色是白色*/margin:5px 10px;font-size:12px;/*用12号字*/display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/text-align:center;/*让文本居中*/text-decoration:none; /*去掉下划线*/}效果如图5
7、最后稍微整理一下代码.nav ul辘腋粪梯{width:980px;margin:0px auto;height:38px;padding:0;}.nav ul li{float:left;}.nav ul li a{width:80px;height:28px;line-height:28px;background:red;color:#FFF;margin:5px 10px;font-size:12px;display:block;text-align:center;text-decoration:none; }.nav ul li a:hover{width:78px;height:26px;line-height:28px;border:1px solid red;color:red;background:#FFF;} 看看效果，成功没？ 思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
