24.5　列表实例

前面学习了列表的语法、列表中的图像以及列表的文本排列等，在CSS布局中，主要使用列表来布局，取代了以往的TABLE布局。而列表不管在TABLE或DIV布局中都可以用到，现在介绍的是在DIV或TABLE中嵌套列表时所用CSS控制的样式。

列表在CSS中是属性，表示为list-style，其后所接的值表示列表的样式。在学习了列表的用法后，下面用实例来演示这些知识的用法，通过设置列表的标记和图像等来说明，下面用步骤实现每个知识点的介绍。

24.5.1　设置列表图像文字内显示

设置表项一为列表图像且文字内显示。首先新建一张网页，在HTML中把列表标记放到标记＜body＞＜/body＞中，其中HTML中列表标记有无序列表和有序列表之分，无序列表用标记对＜ul＞＜/ul＞表示，有序列表用标记对＜ol＞＜/ol＞表示，里面所包含的是列表项，不管是无序列表还是有序列表，列表项都用标记对＜li＞＜/li＞表示。

当列表标记在HTML代码中布局好后，现在要设置其默认的样式，下面代码在网页中表示无序列表，只有一个表项，且文本为“设置自定义图像，文字内显示”，然后通过CSS代码控制，如代码24.5所示。

代码24.5　源代码\第24章\设置列表图像且文字内显示.html

———————————-文件名：设置列表图像且文字内显示.html———————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞列表实例手把手＜/title＞

04 ＜style type="text/css"＞

05 #l1

06 {

07 /设置列表图像显示在文本内/

08 list-style：url（list1.gif）inside；

09 }

10 ＜/style＞

11 ＜/head＞

12 ＜body＞

13 ＜ul＞

14 ＜li id="l1"＞

15 设置自定义图像，文字内显示

16 ＜/li＞

17 ＜ul＞

18 ＜/body＞

19 ＜/html＞

【代码解析】在HTML标记中设置了无序列表，在代码第13～17行的列表中有一列表项，且在列表项中设置了ID选择符，表示用列表图像设置了表项的自定义图像，只有一个表项，效果如图24.5所示。

图　24.5　设置图像和文字内显示