winson的专栏

爱生活

css属性之列表属性

本篇小结css属性的列表属性的一些使用方法。

<!doctype html>
<html>
	<head>
		<title>CSS常见属性(列表属性)</title>
		<meta charset="utf-8">
		<style type="text/css">
		/*
			ul{
				list-style-type:upper-alpha;
			}
			ol{
				list-style-type:disc;
			}
		
		ul.inside{
			list-style-position:inside;
		}
		ul.outside{
			list-style-position:outside;
		}
		
		ul.gif{
			list-style-image:url(images/arr.gif);  images/arr.gif是图片路径,可将前面的小圆点换成我们需要的图片
		}
		ul.png{
			list-style-image:url(images/arr.png);
		}
		*/
		ul{
			list-style:circle outside url(images/arr.png); /*简写的方式*/
		}
		</style>
	</head>
	<body>
		<p>无序列表无序列表无序列表无序列表inside</p>
		<ul class="gif">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表
				<ul class="png">
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
				</ul>
			</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
		<p>无序列表无序列表无序列表无序列表outside</p>
		<ul class="outside">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
		<!--ol>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol-->
	</body>
</html>

最后,再附上一张list-style-type属性值的图片总结。



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012859748/article/details/52347641
文章标签: css 列表 属性
个人分类: html5/css相关
想对作者说点什么? 我来说一句

CSS属性解释、说明

2011年03月20日 9KB 下载

没有更多推荐了,返回首页

不良信息举报

css属性之列表属性

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭