第8章用CSS设置超链接与导航菜单.pptVIP

8.7.3　使用“滑动门”技术设置玻璃材质背景 设置超链接的方式制作滑动门效果。 完成调整效果 小结 本章主要介绍了超链接文本的样式设计，以及对列表的样式设计。对于超级链接，最核心的是4种类别的含义和用法；对于列表，需要了解基本的设置方法。这二者都是非常重要和常用的元素。要求把相关的基本要点掌握熟练，为后面制作复杂的例子打好基础。 第8章 用CSS设置超链接与导航菜单 本章简介： 在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。在各种网站中，导航都是网页中最重要的组成部分之一。因此，也出现了各式各样非常美观、实用性很强的导航样式。 制作丰富的超链接特效 8.1 创建按钮式超链接 8.2 制作荧光灯效果的菜单 8.3 创建基于列表的导航菜单 8.6 应用滑动门技术的玻璃效果菜单 8.7 控制鼠标指针 8.4 设置项目列表样式 8.5 8.1　制作丰富的超链接特效 超链接是网页上最普通的元素，通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。本节主要介绍超链接的各种效果，包括超链接的各种状态、伪属性和按钮特效等。 普通的超链接 没有下划线的超链接 8.2　创建按钮式超链接 很多网页上的超链接都制作成各种按钮的效果，这些效果大都采用了各种图片。本节仅仅通过CSS的普通属性来模拟按钮的效果。 按钮式超链接 8.3　制作荧光灯效果的菜单 下面制作一个简单的竖直排列的菜单效果，在每个菜单项的上边有一条深橙色的横线，当鼠标指针滑过时，横线由深橙色变成浅黄色，就好像一个荧光灯点亮后的效果，同时菜单文字变为青色，以更明显的方式提示用户选中了哪个菜单项目。 荧光灯效果菜单 8.3.1　创建HTML框架 首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架。 没有任何CSS设置时的效果 8.3.2　设置容器的CSS样式 style type=text/css #menu { font-family:Arial; font-size:14px; font-weight:bold; width:120px; background:#000; border:1px solid #ccc; padding:8px; margin:0 auto; } /style 设置内外边距后的效果 设置了#menu容器后的效果 8.3.3　设置菜单项的CSS样式 style type=text/css #menu a, #menu a:visited { display:block; padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; } #menu a:hover { color:#FF0; border-top:8px solid #0E0; } /style 在Firefox和IE中的不同效果 在Firefox和IE中的不同效果 8.4　控制鼠标指针 在浏览网页时，通常看到的鼠标指针的形状有箭头、手形和I字形，而在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML在这方面的不足，通过cursor属性可以设置各式各样的鼠标指针样式。 8.5　设置项目列表样式 传统的HTML提供了项目列表的基本功能，包括顺序式列表的ol标记和无顺序列表的ul标记等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了它最初设计时的功能。本节主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进和位置等。 8.5.1　列表的符号 通常的项目列表主要采用ul或者ol标记，然后配合li标记列出各个项目。 普通项目列表 8.5.2　图片符号 除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。 图片符号 8.6　创建基于列表的导航菜单 对于一个成功的网站，导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。 在传统方式下，制作导航菜单是很麻烦的工作。