共计 1922 个字符,预计需要花费 5 分钟才能阅读完成。
咱们晓得在 HTML 中列表能够分为无序列表、有序列表、定义列表。在网页中常常能够看到无序列表的应用,例如像导航栏菜单、新闻列表、商品分类、图片展现等,根本都是通过无序列表来实现的。
无序列表中每个列表项后面都会默认带一个圆点符号,然而个别咱们平时在网站上看到的列表款式,通常后面是没有圆点符号的,所以咱们要如何去掉这个默认的圆点符号呢?这些都能够通过 CSS 中的列表属性来实现。
本节要讲的 CSS 中的列表属性有上面四个:
属性 | 形容 |
---|---|
list-sytle-type | 设置列表项的标记的类型 |
list-style-position | 设置列表项标记绝对于列表项内容的地位 |
list-style-image | 将图片设置为列表项的标记,属性值为 url(‘ 图片门路 ’) |
list-style | 简写列表属性 |
list-sytle-type
list-sytle-type
属性用于设置列表项的标记的类型,和 HTML 中列表标签中的 type
属性相似。
罕用值属性值如下所示:
属性 | 形容 |
---|---|
none | 无标记符号 |
disc | 默认值,实心圆 |
circle | 空心圆 |
square | 实心正方形 |
decimal | 数字 |
在理论利用中,上述几种属性值用的最多的还是 none
,也就是用于去掉列表项的标记。
示例:
上面是一个没有增加任何款式的列表:
如果咱们心愿去掉列表后面默认的圆点,能够通过将 list-style-type
属性设置为 none
来实现:
ul{list-style-type: none;}
在浏览器中的演示成果:
list-style-image
list-style-image
属性用于应用图像来替换列表项的标记。但有一点须要留神,如果咱们设置了 list-style-image
属性,这个时候设置的 list-sytle-type
属性将不起作用。个别为了避免某些浏览器不反对 list-style-image
属性,咱们会设置一个 list-style-type
属性来代替。
示例:
例如咱们将下面列表项的标记设置为一个图像(图片大小为 50×50),属性值为图像门路:
ul{list-style-image: url(./flower.png);
}
在浏览器中的演示成果:
list-style-position
list-style-position
属性用于设置在何处搁置列表项标记。
属性值有如下所示:
属性值 | 形容 |
---|---|
outside | 默认值,放弃标记位于文本的左侧,列表我的项目标记搁置在文本以外,且盘绕文本不依据标记对齐 |
inside | 示意列表我的项目标记搁置在文本内,且盘绕文本依据标记对齐 |
示例:
例如咱们能够设置两组不同的列表,别离将 list-style-position
属性设置为 outside
和 inside
来进行比照:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS 学习 (9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul class="ul1">
<li> 第一项 </li>
<li> 第二项 </li>
<li> 第三项 </li>
<li> 第四项 </li>
<li> 第五项 </li>
</ul>
<ul class="ul2">
<li> 第一项 </li>
<li> 第二项 </li>
<li> 第三项 </li>
<li> 第四项 </li>
<li> 第五项 </li>
</ul>
</body>
</html>
CSS 款式代码:
.ul1{list-style-position: inside;}
.ul2{list-style-position: outside;}
在浏览器中的演示成果:
能够显著的看到,第一组列表的标记搁置在文本内,第二组列表的标记位于文本的左侧。
list-style
list-style
属性是一个简写属性,是上述几个列表属性的简写模式,用于把所有列表的属性设置在一个申明中。
属性设置程序为:list-style-type
、list-style-position
、list-style-image
,也能够不设置其中某个属性,如果不设置则采纳默认值。
示例:
例如设置一个简写列表款式,其中 list-style-type
属性值为 square
、list-style-position
属性值为 inside
、list-style-image
属性值为 url(./flower.png)
:
ul{list-style:square inside url(./flower.png);
}
在浏览器中的演示成果:
本节咱们讲了 CSS 中的几个列表款式,个别咱们用的最多的就是如何去掉列表项的默认标记,即 list-style-type:none
。