CSS-列表属性

最新推荐文章于 2024-07-25 18:00:00 发布

「已注销」

最新推荐文章于 2024-07-25 18:00:00 发布

阅读量1k

点赞数 1

分类专栏： BS学习

本文链接：https://blog.csdn.net/limeijng/article/details/78724394

版权

BS学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

使用列表属性可以设置列表项的样式，包括符号、缩进等。

1.1列表符号 list-style-type

使用列表符号属性可以设置列表项所使用的符号类型。

语法：

list-style-type:值

1.2图像符号 list-style-image

图像符号属性是指使用图像作为列表符号，以美化网页。

语法：

list-style-image:none | url（图像地址）

说明：none表示不指定图像，url则使用绝对地址或相对地址指定符号的图像。

举例：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS控制列表元素显示</title> 
<style  type="text/css"> 
.ls1{ list-style-type:circle}  
.ls2{ list-style-image:url(icon03.jpg)}  
</style> 
</head> 
<body> 
<ul class="ls1"> 
<li>诗词歌赋</li> 
<li>散文精选</li> 
<li>言情小说</li> 
</ul> 
<ul class="ls2"> 
<li>诗词歌赋</li> 
<li>散文精选</li> 
<li>言情小说</li> 
</ul> 
</body> 
</html>

运行结果：

1.3列表缩进list-style-position

使用列表缩进属性可以设置列表缩进的程度。

语法：

list-style-position:outside | inside

说明：outside 表示列表项目目标记放置在文本以外，且环绕文本不根据标记对齐；inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>列表缩进</title> 
<style  type="text/css"> 
<!--
.1{font-size:12px;}
ol{
list-style-type:circle;
list-style-image:url(images/icon_ol.gif);
list-style-position:inside;
}
--> 
</style> 
</head> 
<body> 
<ol class="1"> 
<li></li> 
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li> 
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li> 
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li> 
<li>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li> 
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。</li> 
</body> 
</html>

运行结果：

1.4列表复合属性 list-style

列表复合属性用于设置列表项目的相关样式。

语法：

list-style:list-style-image | list-stale-position | list-stle_type

说明:当 list-style-image 和list-style-type 都被指定的时候，list-style-image 将优先；除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>复合属性列表</title> 
<style  type="text/css"> 
<!--
.1{font-size:12px;}
ol{
list-style-type:square;
list-style-image:url(images/closel.gif);
list-style-position:outside;
}
--> 
</style> 
</head> 
<body> 
<ol> 
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li> 
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li> 
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li> 
<li>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li> 
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。</li> 
</body> 
</html>

运行结果：