1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第8章 使用CSS修饰链接与列表8.1 制作超链接特效制作超链接特效 8.1.1 动态超链接通过通过CSS可以设置超链接的各种属性，而且通过伪类还可以制作出许多动可以设置超链接的各种属性，而且通过伪类还可以制作出许多动态效果。态效果。【演练【演练8-1】设置动态超链接的外观，鼠标未悬停时文字链接的效果如图】设置动态超链接的外观，鼠标未悬停时文字链接的效果如图8-1（a）所示，鼠标悬停在文字链接上时的效果如图）所示，鼠标悬停在文字链接上时的效果如图8-1（b）所示。）所示。8.1 制作超链接特效制作超链接特效 8.1
2、.2 浮雕背景超链接【演练【演练8-2】通过超链接背景图像的变换，实现浮雕背景超链接的效果，】通过超链接背景图像的变换，实现浮雕背景超链接的效果，鼠标未悬停时文字链接的效果如图鼠标未悬停时文字链接的效果如图8-2（a）所示，鼠标悬停在文字链接上时的）所示，鼠标悬停在文字链接上时的效果如图效果如图8-2（b）所示。）所示。8.1 制作超链接特效制作超链接特效 8.1.3 按钮式超链接【演练【演练8-3】制作按钮式超链接，当鼠标悬停到按钮上时，可以看到超链】制作按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮接类似按钮“被按下被按下”的效果，如图的效果，如图8-4所示。所示。8.2 修饰
3、列表修饰列表 8.2.1 表格布局的缺点在表格布局时代，类似于新闻列表这样的效果，一般采用表格来实现，该在表格布局时代，类似于新闻列表这样的效果，一般采用表格来实现，该列表采用多行多列的表格进行布局。列表采用多行多列的表格进行布局。从表格的结构标签来看，标签的对数较多，结构比较复杂。在表格布局中，从表格的结构标签来看，标签的对数较多，结构比较复杂。在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度很高。同时，使主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度很高。同时，使用表格布局不利于搜索引擎抓取信息，直接影响到网站的排名。用表格布局不利于搜索引擎抓取信息，直接影响到
4、网站的排名。8.2 修饰列表修饰列表 8.2.2 列表布局的优势采用采用CSS样式对整个页面布局时，列表标签的作用被充分挖掘出来。从某样式对整个页面布局时，列表标签的作用被充分挖掘出来。从某种意义上讲，除了描述性的文本，任何内容都可以认为是列表。使用列表布局种意义上讲，除了描述性的文本，任何内容都可以认为是列表。使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图8-6所示。所示。8.2 修饰列表修饰列表 8.2.3 CSS列表属性1列表类型列表类型通常项目列表主要采用通常项目列表主要采用或或标签，然后配合标签，然后配合标
5、签罗列各个项目。标签罗列各个项目。【演练【演练8-4】设置列表类型，本例页面】设置列表类型，本例页面8-4.html的显示效果如图的显示效果如图8-7所示。所示。8.2 修饰列表修饰列表 8.2.3 CSS列表属性2列表项图像符号列表项图像符号list-style-image属性的属性值包括属性的属性值包括URL（图像的路径）、（图像的路径）、none（默认值，（默认值，无图像被显示）和无图像被显示）和inherit（从父元素继承属性，部分浏览器对此属性不支持）。（从父元素继承属性，部分浏览器对此属性不支持）。【演练【演练8-6】设置列表项图像符号，本例页面】设置列表项图像符号，本例页面8-6
6、.html的显示效果如图的显示效果如图8-11所示。所示。8.2 修饰列表修饰列表 8.2.3 CSS列表属性3列表项位置列表项位置list-style-position属性用于设置在何处放置列表项标记，其属性值只有属性用于设置在何处放置列表项标记，其属性值只有两个关键词两个关键词outside（外部）和（外部）和inside（内部）。（内部）。【演练【演练8-7】设置列表项位置，】设置列表项位置，8-7.html的显示效果如图的显示效果如图8-12所示。所示。8.3 综合案例综合案例制作光影世界风景图文列表制作光影世界风景图文列表 制作光影世界风景图文列表【演练【演练8-8】使用图文信息列表
7、制作光影世界风景图文列表，本例页面】使用图文信息列表制作光影世界风景图文列表，本例页面8-8.html的显示效果如图的显示效果如图8-14所示。所示。8.4 实训实训制作家具商城友情链接局部页面制作家具商城友情链接局部页面 制作家具商城友情链接页面【实训】制作家具商城友情链接局部页面，本例文件【实训】制作家具商城友情链接局部页面，本例文件8-9.html在浏览器中在浏览器中的显示效果如图的显示效果如图8-18所示。所示。习题习题8习题81使用变换超链接背景图像的技术制作图文链接，鼠标未悬停时文字链使用变换超链接背景图像的技术制作图文链接，鼠标未悬停时文字链接的效果如图接的效果如图8-19（a）所示，鼠标悬停在文字链接上时的效果如图）所示，鼠标悬停在文字链接上时的效果如图8-19（b）所示。所示。2制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，浏览器中显示的效果如图标经过和我联系文字的链接风格截然不同，浏览器中显示的效果如图8-20所所示。示。3使用图文信息列表技术制作如图使用图文信息列表技术制作如图8-21所示的页面。所示的页面。
