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>
运行完整的案例代码,得到效果图如下所示。