（10）CSS控制列表样式

最新推荐文章于 2022-05-20 21:47:42 发布

mxd_xyz

最新推荐文章于 2022-05-20 21:47:42 发布

阅读量860

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/mxd395/article/details/24459175

版权

CSS学习笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

HTML中使用ul与li创建无序列表，使用ol和li创建有序列表，这一节我们学习使用CSS控制列表样式。

（1）list-ttyle-type：用于控制标记符的外观形状。

对于无序列表，该属性取值如下：1. none，没有标记符；2. disc（默认值），填充的圆；3. circle，空心圆；4. square，填充的正方形。

对于有序列表，该属性取值如下：1. decimal，数字；2. decimal-leading-zero，前面加0的数字；3. lower-alpha，小写字母；4. upper-alpha，大写字母；5. lower-roman，小写罗马字母；6. upper-roman，大写罗马字母。

（2）list-style-position：该属性用于声明列表标志相对于列表项内容的位置。

外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。对于嵌套列表，可以使用值inherit，规定应该从父元素继承 list-style-position 属性的值。

（3）list-style-image：指定图像作为标记。使用方式如下：

li { list-style-image: url("haha.gif") }

需要注意的是，如果正在使用嵌套列表，该属性会继承父元素，为了防止继承，须将list-style-image设置为none。

（4）list-style：简写形式

可以一次性表达以上三个属性中的多个属性，可以以任意顺序出现。

测试效果图如下：

CSS代码如下：

li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
 ul.one { list-style: url("test1.jpg") inside;  }

HTML代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS控制列表样式</title>
		<link rel="stylesheet" type="text/css" href="test1.css">
	</head>
	
	<body>
		<table width="700" border="1">
			<tr>
				<td>无序列表样式</td>
				<td>有序列表样式</td>
				<td>使用图片做标记符</td>
			</tr>
			<tr>
				<td>
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
				<td>
					<ol>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ol>
				</td>
				<td>
					<ul class="one">
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td colspan="3">注意outside与inside其标记符与li元素框的位置</td>
			</tr>
		</table>		
	</body>
</html>