24.5.3　设置文本外自定义列表图像

本小节来设置文本外的自定义列表图像，对其他值保持默认。列表项图像可以在文本内的区域内显示，也可以在文本区域外显示，在前面两步骤中，介绍了列表中文本内图像和文本外图像。

在本步骤中，设置了第三个表项的自定义的图像，对表项一设置的是文本排列为文本外的图像。文本外的设置，即为默认值，在属性list-style中，设置不设置outside值都表示文本外，代码24.7表示设置表项文本外的图像，用属性list-style的默认值表示表项中的自定义图像。

代码24.7　源代码\第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 #l2

11 {

12 /设置为空心圆/

13 list-style：circle；

14 }

15 #l3

16 {

17 /设置自定义图像/

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

19 }

20 ＜/style＞

21 ＜/head＞

22 ＜body＞

23 ＜ul＞

24 ＜li id="l1"＞

25 设置自定义图像，文字内显示＜/li＞

26 ＜li id="l2"＞

27 文字外显示，空心圆显示

28 ＜/li＞

29 ＜li id="l3"＞

30 设置图像，其他默认

31 ＜/li＞

32 ＜ul＞

33 ＜/body＞

34 ＜/html＞

【代码解析】在代码24.7中，表项一设置的还是原来的样式，但在表项三中，添加了自定义标记（代码第18行），同时表项一的文本排列为内置到文本（代码第8行），其他两表项都是文本外显示，效果如图24.7所示。

图　24.7　只设置图像