打造个性横排导航栏：DIV+CSS实现与优化技巧

</body></html>测试结果应该如下（1）然后我们通过CSS改变样式。
首先，让我们在浏览器中间进行导航。
但首先将宽度放在中心之前。
没有广度，就不可能有中心。
如今，常见的网站宽度是836或7388（当然还有其他。
有些页面会根据访问者显示器的大小而有不同的宽度样式。
由于原因我不想详细介绍）。
方法是在之间添加这段代码来改变宽度。
为了清楚起见，我们添加另一个术语。
测试结果如图2所示。
接下来我们重点说一下。
我们将以下代码添加到样式中。
.navul{width:980px;/*设置元素宽度为980px*/border:1pxsolid#000;/*设置边框颜色#000和宽度1px*/margin:0pxauto0pxauto;/*也可以简写为margin:0auto*/结果应如图3所示。
因为我们要做的是水平条，现在我们需要将其转换为水平布局。
我们将以下代码添加到样式中。
.navulli{float:left;/*让li元素向左浮动*/}我们看到测试结果如图4。
之所以受到限制，是因为礼落下之后，级联就变成了一个元素，没有了广度和深度；（想知道具体的可以百度一下）当然我们可以稍后给ul或者.nav添加深度。
然后我们通过给元素添加样式来使其更加美观。
添加以下代码。
.navullia{width:80px;/*设置元素宽度为80px*/height:28px;/*设置高度为28px*/line-height:28px;/*设置行间距为28px，让文本为中间的Text每行的*/background:red;/*设置主题元素*/color:#FFF;/*文字颜色白色是*/边距:5px10px;字体大小:12px;/*大小12字体*/display:block;/*这个比较关键，因为元素本身是级联的，没有宽高设置宽高都是起作用的*/text-align:center;/*居中文字*/text-ornament:none;/*去掉下划线*/}结果如图5所示，所以我们添加一些交互。
当访问者将鼠标放在某个元素上时，您就会了解到该元素与其他元素不同。
为了实现这一点，我们需要使用：fly伪类。
将以下代码添加到样式中。
.navullia:hover{/*这大概就是说，当鼠标定位到元素上时，元素的样式就按照这段代码执行*/width:78px;高度：26px；行高：28px；d;background:#FFF;}测试结果如图6所示。
最后我们保存好代码吧。
navul{width:980px;margin:0pxauto;高度：38px；填充：0；}.navulli{浮动：左；}.navullia{宽度：80px；高度：28像素；行高：28px；背景：红色；颜色：#FFF；边距：5px10px；字体大小：12px；显示：块；文本对齐：居中；-decoration:none;}.navullia:hover{width:78px;height:26px;line-height:28px;border:1pxsolidred;color:red;background:#FFF;}看看效果，成功了吗？思路类似，可以添加一些自己的元素，比如背景图片等，效果会更好。