- Dreamweaver+Flash+Photoshop网页设计从入门到精通（微课精编版）
- 前端科技编著
- 1104字
- 2025-02-21 07:17:55
4.5 定义列表样式
列表在网页中很常见，由于列表信息比较整齐、直观，非常方便浏览，使用率非常高。CSS定义了多个列表属性，使用CSS定义导航列表样式就比较方便。
4.5.1 实战演练：定义列表样式
视频讲解
CSS提供了4个列表类属性，说明如表4.1所示。
表4.1 列表的CSS属性
下面的示例演示了如何动态控制列表项的显示，即当鼠标经过列表项时，会显示不同的样式，同时显示有趣的提示标志，而鼠标移开后又恢复默认样式。
【操作步骤】
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.21所示。
图4.21 设计列表样式
4.5.2 实战演练：自定义项目符号
视频讲解
CSS定义的列表项符号比较单一，不能满足实际开发的需要，用户一般可以自定义列表符号，实现的方法有多种方式，一般可用list-style-image或者background属性来进行定义。
【示例1】下面的示例介绍了如何利用列表属性list-style-image来控制列表符号的显示技巧。
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.22所示。
图4.22 通过列表属性定义列表符号
使用list-style-image属性定义项目符号虽然简单，但无法灵活控制项目符号的位置。虽然可以使用list-style-position属性定义符号位置，但精确性和灵活性都大打折扣。
解决方法：使用background-image设置背景属性，并配合background-position属性来精确定位背景图像的位置。
【示例2】下面的示例介绍了如何利用background-image来控制列表符号的显示技巧。本例设计在列表项的头和尾定义背景图像作为点缀，修饰列表项效果。
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index1.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.23所示。
图4.23 通过背景图像定义列表符号
提示：用户还可以用图像编辑器制作更精美的背景，然后嵌入列表项内。或者制作一张大图，大小与列表框大小正合适，利用这种方法可以设计更艺术的列表效果。使用CSS能够帮助随时改变列表的外观，而从视觉设计上来说，使用背景控制可以为列表版式提供更多的创意可能。
4.5.3 实战演练：自定义项目列表符号
线上阅读
CSS定义的列表项符号比较单一，不能满足实际开发需要，用户可以自定义列表符号，实现的方法有多种方式，如可用list-style-image：或者background属性来进行定义。演示示例请扫码阅读。