ID：15003965
大小：387.00 KB
页数：11页
时间：2018-07-31
3、不是块状，其大小仅由内容文字决定，所以四个链接的宽度是不同的改变链接的样式，使链接以块状展示加入样式：#menua{display:block;}效果如图：注意对比观察链接部分的变化。第三步：去掉链接的下划线：加入样式：#menua{text-decoration:none;}效果如图：第四步：使列表横向显示加入样式：#menuli{float:left;}效果如图：看，出现问题了，对吧，这不是错误，这是因为使用了float:left之后，元素脱离了文档流，就好像元素不在文档中，而是漂浮在文档之上，所以不包含在外层容
4、器之中。那么，如何把这些元素“拽”回文档，放到容器之中呢？请看下一步。第五步：清除浮动属性需要在浮动元素的后面加上一个元素，用于清理之前的浮动我们加上一个div元素，作为清理浮动的元素。还需要为这个div赋予清理浮动的属性。加入样式：.clear{clear:both;}注意，这是一个类选择器，因为可能有多处浮动需要清理改变后的ul部分为：
5、href="">最新电影
6、:blue;}效果如图：因为鼠标悬停状态不方便被截图下来，所以请大家自行想象那里有一个手型光标。大家可以看出来，小弟在这里动用了和之前不一样的截图工具，可惜那只手还是显示不出来，想象吧。第九步：去掉多余的用于演示的边框，边距。加入样式：（当然，也可以直接删除前面的对应样式）#menu,ul,li,a{border:solidthinblack;margin:0px;padding:0px;}顺便改变字体颜色,加入样式：#menua{color:white;}效果如图：一个简单的横向导航条就完成了，如果你还对细节不满意
7、，可以继续使用CSS进行调整。
此文档下载收益归作者所有
