24.2　设置列表的图像

第24.1小节介绍了列表list-style复合属性的语法，读者对list-style-image也有了大概了解，现在正式来介绍这个可以自定义的列表图像的属性，其语法形式如下。

/设置列表图像/

list-style-image：none|url（url）

本属性有两个参数，其区别如下所述。

❑参数none：表示属性不设置列表图像，是默认值。

❑参数url：使用绝对或相对地址指定背景图像，这样就可以显示自定义的图像了，要注意图像大小，如太大会影响列表的美观（图像是按图像原始大小显示的）。图像链接地址要用括号括起来，然后用引号引起（也可以不用引号），注意括号前面有关键字url。

在输入图像地址的时候，要检查是否为有效地址，如图像不能正确显示，系统会按none处理，同时，若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用，代码24.2演示了如何设置列表的图像。

代码24.2　源代码\第24章\设置列表图像.html

——————————————文件名：设置列表图像.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞设置列表图像＜/title＞

04 ＜style type="text/css"＞

05 #i1

06 {

07 /设置边框/

08 border：1px solid red；

09 }

10 #ii2

11 {

12 /设置列表图像，引用list1.gif/

13 list-style-image：url（"list1.gif"）；

14 }

15 #ii3

16 {

17 /设置列表图像，引用list2.gif/

18 list-style-image：url（list2.gif）；

19 }

20 ＜/style＞

21 ＜/head＞

22 ＜body＞

23 ＜div id="i1"＞

24 ＜！-设置列表—＞

25 ＜ul＞

26 ＜！-设置列表项—＞

27 ＜li id="ii1"＞表列图像默认值none＜/li＞

28 ＜li id="ii2"＞设置列表图像1＜/li＞

29 ＜li id="ii3"＞设置列表图像2＜/li＞

30 ＜/ul＞

31 ＜/div＞

32 ＜/body＞

33 ＜/html＞

【代码解析】在一个列表中，有3个表项，分别设置了它们的list-style-image属性，代码第

27行为表项一，表示默认值；代码第28行为表项二，设置属性list-style-image的值为图像list1.gif，就与本网页同一目录；代码第29行为表项三，与表项二相差不多，只是图像文件不同，这样在一个列表中显示了3个不同的列表图像，效果如图24.2所示。

图　24.2　设置列表图像

注意复合属性list-style可以表示list-style-image的效果，只要设置参数url即可，其他两个参数缺省，系统会按默认值表示。