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