CSS（列表）

最新推荐文章于 2024-04-19 12:54:59 发布

初闻女人香

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量64

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/134691770

版权

在CSS中分有序列表和无序列表，
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：
在这里插入图片描述
要指定列表项标记的图像，使用列表样式图像属性：

简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>简写属性</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

可以按顺序设置如下属性：

1.list-style-type
2.list-style-position (有关说明，请参见下面的CSS属性表)
3.list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。

移除默认值设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表 < ul> 或 < ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>移除默认值操作</title> 
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>默认设置:</p>
<ul>
  <li>Google</li>
  <li>Runoob</li>
  <li>Taobao</li>
</ul>

<p>移除默认设置:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>