CSS-列表样式

最新推荐文章于 2024-08-24 17:18:32 发布

努力学习javaee的小白选手

最新推荐文章于 2024-08-24 17:18:32 发布

阅读量2.2k

点赞数 1

分类专栏： javaee 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_50555031/article/details/124890779

版权

javaee 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、列表的默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)
li 元素没有设置默认的空白（行间距）
dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
dd 元素的margin-left为40px(2.5em)
p 元素的margin-top，margin-bottom为16px(1em)

二、设置无序列表

list-style-type:circle：设置空心圆
list-style-type:disc：设置方块
list-style-type:square：设置实心圆

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无序列表</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.b {list-style-type:square;}
</style>
</head>

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

<ul class="a">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ul>

<ul class="b">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ul>

<ul class="c">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ul>
	
</body>
</html>

运行结果：

三、设置有序列表

lower-roman：小写罗马数字：i, ii, iii, iv, v…
upper-roman：大写罗马数字：I, II, III, IV, V…
decimal：数字：1, 2, 3, …

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

<ol style="list-style-type:lower-roman">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ol>

<ol style="list-style-type:upper-roman">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ol>

<ol style="list-style-type:decimal">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ol>

</body>

运行结果：

四、作为列表项标记的图像

指定列表项标记的图像，使用列表样式图像属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图像列表</title> 
<style>
ul 
{
	list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<p>列表项标记的图像示例:</p>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
</body>
</html>

运行结果：

五、所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。