网页设计与制作教程第8章--使用CSS修饰链接与列表课件

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 浮雕背景超链接【演练8-2】通过超链接背景图像的变换，实现浮雕背景超链接的效果，鼠标未悬停时文字链接的效果如图8-2（a）所示，鼠标悬停在文字链接上时的效果如图8-2（b）所示。8.1 制作超链接特

2、效 8.1.3 按钮式超链接【演练8-3】制作按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图8-4所示。8.2 修饰列表 8.2.1 表格布局的缺点在表格布局时代，类似于新闻列表这样的效果，一般采用表格来实现，该列表采用多行多列的表格进行布局。从表格的结构标签来看，标签的对数较多，结构比较复杂。在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度很高。同时，使用表格布局不利于搜索引擎抓取信息，直接影响到网站的排名。8.2 修饰列表 8.2.2 列表布局的优势采用CSS样式对整个页面布局时，列表标签的作用被充分挖掘出来。从某种意义上讲，除了描述性

3、的文本，任何内容都可以认为是列表。使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图8-6所示。8.2 修饰列表 8.2.3 CSS列表属性1列表类型通常项目列表主要采用或标签，然后配合标签罗列各个项目。【演练8-4】设置列表类型，本例页面8-4.html的显示效果如图8-7所示。8.2 修饰列表 8.2.3 CSS列表属性2列表项图像符号list-style-image属性的属性值包括URL（图像的路径）、none（默认值，无图像被显示）和inherit（从父元素继承属性，部分浏览器对此属性不支持）。【演练8-6】设置列表项图像符号，本例页面8-6.html的显示效果如图8

4、-11所示。8.2 修饰列表 8.2.3 CSS列表属性3列表项位置list-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词outside（外部）和inside（内部）。【演练8-7】设置列表项位置，8-7.html的显示效果如图8-12所示。8.3 综合案例制作光影世界风景图文列表 制作光影世界风景图文列表【演练8-8】使用图文信息列表制作光影世界风景图文列表，本例页面8-8.html的显示效果如图8-14所示。8.4 实训制作家具商城友情链接局部页面 制作家具商城友情链接页面【实训】制作家具商城友情链接局部页面，本例文件8-9.html在浏览器中的显示效果如图8-18所示。习题8习题81使用变换超链接背景图像的技术制作图文链接，鼠标未悬停时文字链接的效果如图8-19（a）所示，鼠标悬停在文字链接上时的效果如图8-19（b）所示。2制作网页中不同区域的链接效果，鼠标经过导航区域