春天里,百花香...
无序列表在Web页面中的用途
除了Div,Table,Form外,我们最常用的Html元素之一就是无序列表ul,使用它通常可以实现以下形式: 1.实现文本数据列表,这是无序列表的原始意图。 2.嵌套使用无序列表,以实现树状结构。 3.修改无序列表的样式,将它作为菜单使用。相对于用表格制作的菜单项,它修改起来比较方便,样式也很容易设置。 第三点就是本文的主要议题。
无序列表的原始形式
原始效果: 要将无序列表作为菜单使用需要修改的地方
由上图可见,无序列表原始的形式是难以作为菜单的,如果想拿无序列表作为菜单,要修改的地方可能有: 1.列表项的圆点一定要去掉,否则影响视觉效果。 2.要能将纵向列表变成横向,因为许多菜单是横向的。 3.如果有必要,需要取消列表项的下划线。
对UL进行样式设置以取消圆点
要取消无序列表左边的圆点,我们可以使用CSS对UL进行样式设置,将其list-style-type属性设置为none就可以了。示例代码如下:
让子项浮动以修改列表项的方向
如果要将本为纵向的菜单改为横向,可以将子项li的属性float值改为left或是right,这样子项就变成了向左浮动或是向右浮动,从纵向形式变成了横向形式。示例如下:
修改链接的text-decoration属性以取消链接文字的下划线 代码如下:
增加链接项的动态背景效果
使用伪类选择器,我们还可以给菜单项加上动态效果,当鼠标掠过时能动态变化菜单的背景色,这样能使当前菜单项更醒目。通过修改子项链接在平时和鼠标掠过时给予不同的背景图片就能办到。
代码示例如下:
posted on 2008-09-27 11:57 sitinspring 阅读(5730) 评论(4) 编辑 收藏 所属分类: HTML,CSS&JS
很好懂,谢谢 回复 更多评论
顶你,向你学习div+css技术。 回复 更多评论
放到Firefox就变形了 回复 更多评论
@lsq 应该是IE和FIreFox对盒模型的不同解释导致了问题。 回复 更多评论
Powered by: BlogJava Copyright © sitinspring