html,使用ul制作横向导航条

3、display:block;}效果如图：注意对比观察链接部分的变化。第三步：去掉链接的下划线：加入样式：#menua{text-decoration:none;}效果如图：第四步：使列表横向显示加入样式：#menuli{float:left;}效果如图：看，出现问题了，对吧，这不是错误，这是因为使用了float:left之后，元素脱离了文档流，就好像元素不在文档中，而是漂浮在文档之上，所以不包含在外层容器之中。那么，如何把这些元素“拽”回文档，放到容器之中呢？请看下一步。第五步：清除浮动属性需要在浮动元素的后面加上一个元素，用于清理之前的浮动我们加上一个div元素，作为清理

4、浮动的元素。还需要为这个div赋予清理浮动的属性。加入样式：.clear{clear:both;}注意，这是一个类选择器，因为可能有多处浮动需要清理改变后的ul部分为：

• 我的主页
• 新闻头条
• 电视剧
• 最新电影

5、-color:red;}效果：第七步：貌似不太好看，因为链接中的字和边框紧紧地挨在一起。只需调整一下链接的边框的内边距：加入样式：#menua{padding:10px;}效果如图：第八步：为链接设置鼠标停留在上面的样式：加入样式：#menua:hover{background-color:blue;}效果如图：因为鼠标悬停状态不方便被截图下来，所以请大家自行想象那里有一个手型光标。大家可以看出来，小弟在这里动用了和之前不一样的截图工具，可惜那只手还是显示不出来，想象吧。第九步：去掉多余的用于演示的边框，边距。加入样式：（当然，也可以直接删除前面的对应样式）#menu,ul

6、,li,a{border:solidthinblack;margin:0px;padding:0px;}顺便改变字体颜色,加入样式：#menua{color:white;}效果如图：一个简单的横向导航条就完成了，如果你还对细节不满意，可以继续使用CSS进行调整。