css列表定义

最新推荐文章于 2022-06-17 22:29:17 发布

wj18740503137

最新推荐文章于 2022-06-17 22:29:17 发布

阅读量530

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wj18740503137/article/details/108922913

版权

css列表定义

css列表分为有序列表和无序列表

标记类型的定义：list-style-type:属性；

none（无标记） disc（默认，标记是实心圆） circle（空心圆）

square（实心方块） decimal(标记是数字） decimal-leading-zero（0开头的数字标记；如：01，02，03等）

lower-roman（小写开头的罗马数字） upper-roman（大写开头的罗马数字） lower-alpha（小写英文字母开头）

upper-alpha(大写字母开头） hiragana（日文片假名如：a i u e o ka ki等）

katakana(标记是日文片假名 A I U E O KA KI)

标记的位置：list-style-position:属性; (属性分为inset和outset两种）inset为空两个

设置图像列表标记：list-style-image：url(图片地址)

简写方式：list-style:(标记类型标记位置图像列表标记);

具体代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表的定义</title>
		<style type="text/css">
			ol{list-style-type:upper-roman;}
			ul.inset{list-style-position: inside;list-style-image:url(img/arr.png);}
			ul.p{list-style: url(img/arr.png) circle inset;}
		</style>
	</head>
	<body>
		<ol>
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
		</ol>
		<ul class="inset">
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
		</ul>
		<ul class="p">
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
			<li>麦子学院</li>
		</ul>
	</body>
</html>

运行效果如下：

wj18740503137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css列表定义

css列表定义css列表分为有序列表和无序列表标记类型的定义：list-style-type:属性；none（无标记） disc（默认，标记是实心圆） circle（空心圆）square（实心方块） decimal(标记是数字） decimal-leading-zero（0开头的数字标记；如：01，02，03等）lower-roman（小写开头的罗马数字） upper-roman（大写开头的罗马数字） lower-alpha（小写英文字母开头）upper-alpha(大写字母...
复制链接

扫一扫