CSS列表样式属性

最新推荐文章于 2023-03-11 13:44:41 发布

whyabc

最新推荐文章于 2023-03-11 13:44:41 发布

阅读量2.4k

点赞数

分类专栏： css

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

列表样式类型属性(list-style-type)
这个属性用来设定列表项标记<li>的类型。有以下值：
• disc ( 缺省值，黑圆点)
• circle (空心圆点)
• square (小黑方块)
• decimal (数字排序)
• lower-roman (小写罗马字排序)
• upper-roman (大写罗马字排序)
• lower-alpha (小写字母排序)
• upper-alpha (大写字母排序)
• none (无列表项标记) ，最常用

以disc,circle,square,none作为列表项标记的列表示例：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>列表样式属性</title>
		
		<style type="text/css">
			.disc{
				list-style-type:disc;
			}
			.circle{
				list-style-type:circle;
			}
			.square{
				list-style-type:square;
			}
			.none{
				list-style-type:none;
			}			
		</style>
	</head>
	<body>
		<ul class="disc">
			<li>肉类</li>
			<li>蔬菜</li>
			<li>水果</li>
		</ul>
		<ul class="circle">
			<li>肉类</li>
			<li>蔬菜</li>
			<li>水果</li>
		</ul>
		<ul class="square">
			<li>肉类</li>
			<li>蔬菜</li>
			<li>水果</li>
		</ul>
		<ul class="none">
			<li>肉类</li>
			<li>蔬菜</li>
			<li>水果</li>
		</ul>
	</body>
</html>

列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值：
• outside (以列表项内容为准对齐) ， 默认值。
• inside (以列表项标记为准对齐)

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>列表样式属性</title>
		
		<style type="text/css">
			.u1 {list-style-position:outside}
			.u2 {list-style-position:inside}
		</style>
	</head>
	<body>
		<ul class ="u1">
			<li>芙蓉姐姐</li>
			<li>木子美</li>
			<li>竹影青瞳</li>
			<li>流氓燕</li>
		</ul>
		<ul class ="u2">
			<li>芙蓉姐姐</li>
			<li>木子美</li>
			<li>竹影青瞳</li>
			<li>流氓燕</li>
		</ul>
	</body>
</html>

列表样式图片属性(list-style-image)
列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>列表样式图片</title>
		
		<style type="text/css">
			ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
		</style>
	</head>
	<body>

		<ul>
			<li>芙蓉姐姐</li>
			<li>木子美</li>
			<li>竹影青瞳</li>
			<li>流氓燕</li>
		</ul>
	</body>
</html>

列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，

列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>列表样式属性</title>
		
		<style type="text/css">
			ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
		</style>
	</head>
	<body>
		<ul>
			<li>茶</li>
			<li>咖啡</li>
			<li>可乐</li>
		</ul>
	</body>
</html>

原文：http://home.51.com/myloveforyou217/diary/item/10034794.html

whyabc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS列表样式属性

列表样式类型属性(list-style-type)这个属性用来设定列表项标记的类型。有以下值：• disc (缺省值，黑圆点) • circle (空心圆点) • square (小黑方块) • decimal (数字排序) • lower-roman (小写罗马字排序) • upper-roman (大写罗马字排序) • lower-alpha (小写字母排序)
复制链接

扫一扫