第8章 用CSS制作实用的菜单.ppt

DIV+CSS网页样式与布局 第8章 CSS制作实用菜单 简介 作为一个成功的网站,导航菜单是永远不可缺少的.导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架。本章围绕菜单的制作、介绍相关的项目列表、菜单变幻和导航栏等的内容。 项目列表 列表的符号 通常的项目列表主要采用ul或ol标记，然后配合li标记罗列各个项目。(8-1.html) 在CSS中项目列表的编号是通过属性list-style-type来修改的。 当给ul或者ol标记设置list-style-type属性时，在它们中间的所有li标记都将采用该设置，而如果li标记单独设置list-style-type属性，则仅仅作用在该条项目上。(8-2.html) 项目列表 List-style-type属性值及其显示效果 项目列表 图片符号 除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。(8-3.html) 对比两个浏览器就会发现图标与文字之间的距离有着明显的区别,因此这种设置图片符号的方法并不推荐,建议将list-style-type属性设置为none,然后修改li标记的背景属性background来实现(8-4.html) 无需要表格的菜单 当项目列表的项目符号可以通过设置list-style-type属性值为none时,制作各种各样的菜单和导航条便成了项目列表的最大用处之一,通过各种CSS属性变幻可以达到很多意想不到的导航效果. (见8-5.html) 菜单的横竖转换 导航条不只是竖直排列,很多时候要求页面的菜单能够在水平方向显示.通过CSS属性的控制,可以轻松实现项目列表导航条的横竖转换.(8-6.html) 菜单实例：百度导航条 菜单实例：流行的Tab菜单 * * 不显示任何符号 None i,ii,iii Lower-roman I,II,III Upper-roman a,b,c Lower-alpha A,B,C Upper-alpha 1,2,3 Decimal 正文形 Square 空心圆 Circle 实心圆 Disc 显示效果 关键字 ul{ list-style-image:url(icon1.jpg); /*图片符号*/ } ul{ list-style-image:none; } Li{ background:url(icon1.jpg) no-repeat; padding-left:25px; } 注:display:block;语句,通过该语句,超链接被设置成了块元素,当鼠标进入该块的任何部分时都会被激活,而不是仅仅在文字上方时才被激活 通过设置li的float属性，使得各个项目都水平显示。 采用项目列表制作的水平菜单时,如果没有设置ul标记的宽度width属性,那么当浏览器的宽度缩小时,菜单会自动换行,这是采用table标记制作的菜单所无法实现的,也被经常加以活用,实现各种效果