023_CSS列表

最新推荐文章于 2021-08-04 08:17:49 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-08-04 08:17:49 发布

阅读量118

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109072251

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. CSS列表属性允许你放置、改变列表项标志, 或者将图像作为列表项标志。

2. CSS列表属性

3. 列表类型

3.1. list-style-type属性设置列表项标记的类型。

3.2. 默认值

3.3. 可能的值

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>所有的列表样式类型</title>
		<meta charset="utf-8" />

		<style type="text/css">
			ul.none {
				list-style-type: none;
			}
			ul.disc {
				list-style-type: disc;
			}
			ul.circle {
				list-style-type: circle;
			}
			ul.square {
				list-style-type: square;
			}
			ul.decimal {
				list-style-type: decimal;
			}
			ul.decimal-leading-zero {
				list-style-type: decimal-leading-zero;
			}
			ul.lower-roman {
				list-style-type: lower-roman;
			}
			ul.upper-roman {
				list-style-type: upper-roman;
			}
			ul.lower-alpha {
				list-style-type: lower-alpha;
			}
			ul.upper-alpha {
				list-style-type: upper-alpha;
			}
			ul.lower-greek {
				list-style-type: lower-greek;
			}
			ul.lower-latin {
				list-style-type: lower-latin;
			}
			ul.upper-latin {
				list-style-type: upper-latin;
			}
			ul.hebrew {
				list-style-type: hebrew;
			}
			ul.armenian {
				list-style-type: armenian;
			}
			ul.georgian {
				list-style-type: georgian;
			}
			ul.cjk-ideographic {
				list-style-type: cjk-ideographic;
			}
			ul.hiragana {
				list-style-type: hiragana;
			}
			ul.katakana {
				list-style-type: katakana;
			}
			ul.hiragana-iroha {
				list-style-type: hiragana-iroha;
			}
			ul.katakana-iroha {
				list-style-type: katakana-iroha;
			}
		</style>
	</head>
	<body>
		<ul class="none">
			<li>"none" 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="disc">
			<li>Disc 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="circle">
			<li>Circle 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="square">
			<li>Square 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="decimal">
			<li>Decimal 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="decimal-leading-zero">
			<li>Decimal-leading-zero 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="lower-roman">
			<li>Lower-roman 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="upper-roman">
			<li>Upper-roman 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="lower-alpha">
			<li>Lower-alpha 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="upper-alpha">
			<li>Upper-alpha 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="lower-greek">
			<li>Lower-greek 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="lower-latin">
			<li>Lower-latin 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="upper-latin">
			<li>Upper-latin 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="hebrew">
			<li>Hebrew 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="armenian">
			<li>Armenian 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="georgian">
			<li>Georgian 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="cjk-ideographic">
			<li>Cjk-ideographic 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="hiragana">
			<li>Hiragana 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="katakana">
			<li>Katakana 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="hiragana-iroha">
			<li>Hiragana-iroha 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>

		<ul class="katakana-iroha">
			<li>Katakana-iroha 类型</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>
	</body>
</html>

3.4.2. 效果图

4. 列表项图像

4.1. list-style-image属性使用图像来替换列表项的标记。

4.2. 这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-position属性控制。

4.3. 请始终规定一个"list-style-type"属性以防图像不可用。

4.4. 默认值

4.5. 可能的值

5. 列表标志位置

5.1. list-style-position属性设置在何处放置列表项标记。

5.2. 默认值

5.3. 可能的值

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>列表标志位置</title>
		<meta charset="utf-8" />

		<style type="text/css">
			ul {
				list-style-image: url('eg_arrow.gif');
			}
			ul.inside {
				list-style-position: inside;
			}
			ul.outside {
				list-style-position: outside;
			}
		</style>
	</head>
	<body>
		<p>该列表的list-style-position的值是"inside"：</p>
		<ul class="inside">
			<li>Earl Grey Tea - 一种黑颜色的茶</li>
			<li>Jasmine Tea - 一种神奇的"全功能"茶</li>
			<li>Honeybush Tea - 一种令人愉快的果味茶</li>
		</ul>

		<p>该列表的list-style-position的值是"outside"：</p>
		<ul class="outside">
			<li>Earl Grey Tea - 一种黑颜色的茶</li>
			<li>Jasmine Tea - 一种神奇的"全功能"茶</li>
			<li>Honeybush Tea - 一种令人愉快的果味茶</li>
		</ul>
	</body>
</html>

5.4.2. 效果图

6. 简写列表样式

6.1. list-style简写属性在一个声明中设置所有的列表属性。

6.2. list-style可以按顺序设置如下属性:

list-style-type
list-style-position
list-style-image

6.3. 可以不设置其中的某个值, 比如: "list-style: circle inside;"也是允许的。未设置的属性会使用其默认值。

6.4. 默认值

6.5. 例子

6.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>简写列表样式</title>
		<meta charset="utf-8" />

		<style type="text/css">
			ul {
				list-style: square inside url('eg_arrow.gif');
			}
		</style>
	</head>
	<body>
		<ul>
			<li>咖啡</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>
	</body>
</html>

6.5.2. 效果图