HTML,使用ul制作横向导航条.docVIP

HTML：使用ul制作横向导航条 说明： 1：为了方便学习，采用把每一个关键步骤完全分开写的方式。 2：所有内容采用360极速浏览器测试，因为其采用Chrome内核，而Chrome是对标准支持最好的内核。 3：小菜原创。 Html代码： !DOCTYPE html html head titleTEST/title meta http-equiv=content-type content=text/html;charset=utf-8 / /head body div id=menu ul lia href=我的主页/a/li lia href=新闻头条/a/li lia href=电视剧/a/li lia href=最新电影/a/li /ul /div /body /html 为了方便观察，为所有元素添加边框和边距： 加入样式： #menu,ul,li,a{ border:solid thin black; margin:10px; } 效果： 第一步： 去掉前面的小圆点 加入样式： #menu li { list-style:none; } 效果如图： 第二步： 可以看到，链接还不是块状，其大小仅由内容文字决定，所以四个链接的宽度是不同的 改变链接的样式，使链接以块状展示 加入样式： #menu a { display:block; } 效果如图： 注意对比观察链接部分的变化。 第三步： 去掉链接的下划线： 加入样式： #menu a { text-decoration:none; } 效果如图： 第四步： 使列表横向显示 加入样式： #menu li { float:left; } 效果如图： 看，出现问题了，对吧，这不是错误，这是因为使用了float:left之后，元素脱离了文档流，就好像元素不在文档中，而是漂浮在文档之上，所以不包含在外层容器之中。 那么，如何把这些元素“拽”回文档，放到容器之中呢？请看下一步。 第五步： 清除浮动属性 需要在浮动元素的后面加上一个元素，用于清理之前的浮动 我们加上一个div元素，作为清理浮动的元素。 还需要为这个div赋予清理浮动的属性。 加入样式： .clear { clear:both; } 注意，这是一个类选择器，因为可能有多处浮动需要清理 改变后的ul部分为： ul lia href=我的主页/a/li lia href=新闻头条/a/li lia href=电视剧/a/li lia href=最新电影/a/li div class=clear/ /ul 效果如图： 跑掉的元素回来啦！ 第六步： 现在让我们为这些链接设置背景色： 我是个俗人，就设置红色吧： 加入如下样式： #menu a { background-color:red; } 效果： 第七步： 貌似不太好看，因为链接中的字和边框紧紧地挨在一起。 只需调整一下链接的边框的内边距： 加入样式： #menu a { padding:10px; } 效果如图： 第八步： 为链接设置鼠标停留在上面的样式： 加入样式： #menu a:hover { background-color:blue; } 效果如图： 因为鼠标悬停状态不方便被截图下来，所以请大家自行想象那里有一个手型光标。 大家可以看出来，小弟在这里动用了和之前不一样的截图工具，可惜那只手还是显示不出来，想象吧。 第九步： 去掉多余的用于演示的边框，边距。 加入样式：（当然，也可以直接删除前面的对应样式） #menu,ul,li,a{ border:solid thin black; margin:0px; padding:0px; } 顺便改变字体颜色,加入样式： #menu a { color:white; } 效果如图： 一个简单的横向导航条就完成了，如果你还对细节不满意，可以继续使用CSS进行调整。