CSS 列表样式(ul)

最新推荐文章于 2024-03-21 17:47:25 发布

boonyaxnn

最新推荐文章于 2024-03-21 17:47:25 发布

阅读量2.5k

点赞数

分类专栏： CSS3 文章标签： css ul

本文链接：https://blog.csdn.net/boonyaxnn/article/details/64923208

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

2、在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

<!DOCTYPE html>
<html>
	<head>
		<title>css </title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style>
			ul.a {
				list-style-type: circle;
			}
			ul.b {
				list-style-type: square;
			}
			ol.c {
				list-style-type: upper-roman;
			}
			ol.d {
				list-style-type: lower-alpha;
			}
		</style>
	</head>

	<body>
		<p>
			无序列表实例:
		</p>

		<ul class="a">
			<li>
				Coffee
			</li>
			<li>
				Tea
			</li>
			<li>
				Coca Cola
			</li>
		</ul>

		<ul class="b">
			<li>
				Coffee
			</li>
			<li>
				Tea
			</li>
			<li>
				Coca Cola
			</li>
		</ul>

		<p>
			有序列表实例:
		</p>

		<ol class="c">
			<li>
				Coffee
			</li>
			<li>
				Tea
			</li>
			<li>
				Coca Cola
			</li>
		</ol>

		<ol class="d">
			<li>
				Coffee
			</li>
			<li>
				Tea
			</li>
			<li>
				Coca Cola
			</li>
		</ol>

	</body>
</html>

例子解释：

ul:
- 设置列表样式类型为没有删除列表项标记
- 设置填充和边距0px（浏览器兼容性）
ul中所有li:
- 设置图像的URL，并设置它只显示一次（无重复）
- 您需要的定位图像位置（左0px和上下5px）
- 用padding-left属性把文本置于列表中

效果图

boonyaxnn

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 列表样式(ul)

1、CSS列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像2、在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母 css ul.a { list-style-type: circle;
复制链接

扫一扫