24.5.2　设置列表样式为空心圆

在上一小节的步骤中，设置了列表项中的图像在文本内显示，而图像是自定义图像。在本步骤中设置列表项为文本外显示，且列表项图像为空心圆，其中，空心圆是由CSS提供的参数。

在文字外以空心圆显示，需要设置list-style的属性值为空心圆形。代码24.6表示空心圆的用法，在上一小节的代码基础上，添加了一列表项，通过设置list-style属性来表现列表项的空心圆。

代码24.6　源代码\第24章\文字外且空心圆显示.html

—————————————文件名：文字外且空心圆显示.html————————————-

01 ＜html＞

02 ＜head＞

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

04 ＜style type="text/css"＞

05 #l1

06 {

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

08 }

09 #l2

10 {

11 /设置列表图像为空心圆/

12 list-style：circle；

13 }

14 ＜/style＞

15 ＜/head＞

16 ＜body＞

17 ＜ul＞

18 ＜li id="l1"＞

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

20 ＜li id="l2"＞

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

22 ＜/li＞

23 ＜ul＞

24 ＜/body＞

25 ＜/html＞

【代码解析】代码第12行将list-style设置为circle，表示空心圆，在原来自定义基础上加上另一表项，与列表项一比较；代码第20行为第2个列表项在前面显示，即在文本外显示，而列表项一为文本内显示，效果如图24.6所示。

图　24.6　文字外且空心圆显示