2.2.37 CSS列表属性(二)列表项目图像：list-style-image

2.2.37 CSS列表属性（二）列表项目图像：list-style-image
(列表属性)
CSS控制列表样式
✧list-style-image属性
使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。

接下来，通过一个案例演示list-style-image属性的用法，具体步骤如下：
●搭建HTML结构，具体代码如下所示。

<h2>传智播客学科</h2>
<ul>
<li>网页平面设计</li>
<li>JAVA</li>
<li>php</li>
<li>.net</li>
</ul>
●定义CSS样式，具体代码如下所示：
<style type="text/css">
ul{list-style-image:url(images/book.png);}
</style>
运行完整的案例代码，得到效果图如下所示。

✧list-style-position属性
在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种，对它们的解释如下：
●inside：列表项目符号位于列表文本以内。

●outside：列表项目符号位于列表文本以外（默认值）。

为了便于初学者的理解和掌握，接下来，通过一个案例演示list-style-position属性的用法，具体代码如下所示：
●搭建HTML结构，具体步骤如下：
<h2>传智播客学科</h2>
<ul class="in">
<li>网页平面设计</li>
<li>JAVA</li>
<li>php</li>
<li>.net</li>
</ul>
<ul class="out">
<li>网页平面设计</li>
<li>JAVA</li>
<li>php</li>
<li>.net</li>
</ul>
定义CSS样式，具体代码如下所示：
<style type="text/css">
.in{list-style-position:inside;}
.out{list-style-psition:outside;}
li{ border:1px solid #CCC;}
</style>
运行完整的案例代码，得到效果图如下所示。