特别致谢

　　本教程由课件吧(http://www.cai8.net)开发，并由本书作者寒蓝老师提供在“闪客起航”开设专栏进行在线学习，以帮助大家快速掌握CSS的知识。
　　本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用，深受广大读者的欢迎，目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。
　　朋友们可以在全国各新华书店购买此书，或者在当当网、互动出版网邮购此书。

第五课 CSS基本应用(二)

5.2.1 课堂实例――用CSS控制列表

前面已经学习过，在Dreamweaver的【属性】面板有【项目列表】和【编号列表】的图标按钮，能够产生自动列表功能。在默认状态下，它有两种形式，即圆点和阿拉伯数字。

利用点或者数字制作一般的列表项目的时候，只要在【属性】面板中直接选择相应的设置按钮即可。但是，如果想利用镂空的圆形或者方形、漂亮图标来编排列表项目，就要利用CSS样式表来定义。

1．建立段落列表

（1）新建一个网页文档，保存为5.1.3.html。在网页文档中输入一些文字，效果如图5-1所示。

图5-1 输入文本信息

（2）选中网页文档中的部分文本，然后在【属性】面板中单击【项目列表】，这时，所选内容转变为圆点项目列表，如图5-2所示。

图5-2 圆点项目列表效果

（3）再次选中文本，在【属性】面板中单击【编号列表】，这时，所选内容转变为阿拉伯数字编号的有序列表。如图5-3所示。

图5-3 阿拉伯数字编号的有序列表效果

2．用CSS自定义段落列表

（1）单击【CSS样式】面板的【新建CSS规则】按钮，弹出【新建CSS规则】对话框。在此对话框的【选择器类型】单选项里选择【类（可应用于任何标签）】，在【名称】文本框中输入.list，在【定义在】单选框里选择【仅对该文档】，如图5-4所示。

图5-4 新建.list样式

（2）单击【确定】按钮，在弹出的【.list的CSS规则定义】的对话框中，选择左侧【分类】列表中的【列表】，在右侧的窗格中，选择【类型】列表框中的【大写罗马数字】，其他选项暂时不定义，如图5-5所示。单击【确定】按钮，完成项目符号的定义。

图5-5 .list的CSS规则定义

（3）在标签选择器中选择&l

[1] [2] [3] 下一页