第11章用CSS设置链接与导航菜单.ppt

第11章 用CSS设置 链接与导航菜单 在一个网站中，所有页面都会通过超链 接相互链接在一起，这样才会形成一个有机 的整体。 在各种网站中，导航都是网页中最重要 的组成部分之一。 因此，也出现了各式各样非常美观、实 用性很强的导航样式，如图11.1所示的是 Microsoft公司关于Office的网站，上部的导 航条和Office 2007软件风格非常一致。 11.1 丰富的超链接特效 在HTML中，超链接是通过a标记来 实现的，链接的具体地址则是利用a标记的 href属性设置，例如： a href=前沿视频教室/a 在默认的浏览器浏览方式下，超链接统 一为蓝色并且有下画线，被点击过的超链接 则为紫色并且也有下画线，如图11.3所示。 a{ /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ } 11.2 控制鼠标指针 11.3 设置项目列表样式 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。 列表类型 要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。 例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。 要修改用于列表项的标志类型，可以使用属性 list-style-type： ul {list-style-type : square} 上面的声明把无序列表中的列表项标志设置为方块。 列表项图像 有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到： ul li {list-style-image : url(xxx.gif)} 只需要简单地使用一个 url() 值，就可以使用图像作为标志。 列表标志位置 CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。 简写列表样式 为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样： li {list-style : url(example.gif) square inside} list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。 11.4 创建简单的导航菜单 11.4.1 简单的竖直排列菜单 11.4.2 横竖自由转换菜单 11.5 应用滑动门技术的玻璃效果菜单 * * * 丰富的超链接特效 11.1 控制鼠标指针 11.2 设置项目列表样式 11.3 创建简单的导航菜单 11.4 应用滑动门技术的玻璃效果菜单 11.5 图11.1 Office网站导航风格与软件风格一致 图11.2 Windows Mobiles网站的菜单式导航 图11.3 普通的超链接 图11.4 没有下划线的超链接 在超链接上点击时，即“当前激活”时超链接的样式 a:active 鼠标指针经过超链接时的样式 a:hover 被点击过的超链接的样式 a:visited 超链接的普通样式，即正常浏览状态的样式 a:link 说 明 属 性 表11.1 可制作动态效果的CSS伪类别属性 表11.2 cursor定制的鼠标指针效果 图11.6 普通项目列表 图11.7 项目编号 图11.11 无需表格的菜单 基本页面 页面背景色 项目列表为普通超链接 添加边框，分割超链接 设置超链的样式 图11.16 水平菜单 图11.17 水平菜单可以自由地转换为竖直菜单和折行菜单 图11.18 玻璃效果的菜单 基本页面 设置菜单整体效果 应用滑动门技术 * *