CSS列表

最新推荐文章于 2023-11-29 16:24:40 发布

一只爱好编程的程序猿

最新推荐文章于 2023-11-29 16:24:40 发布

阅读量544

点赞数 2

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_37881565/article/details/108314753

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS列表

CSS列表属性作用如下:

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

列表

在HTML中，有两种类型的列表:

无序列表-列表项标记用特殊图形
有序列表-列表项的标记有数字和字母

不同的列表项标记

list-style-type属性指定列表项标记的类型是:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

效果图如下所示:

作为列表项标记的图像

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

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

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

效果图如下所示:

浏览器兼容性解决方案

下面的例子会显示的图案标记:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

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

</html>

效果图如下所示:

列表简写属性

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

效果图如下所示:

可以按顺序设置如下属性

list-style-type
list-style- position
list-style-image

所有CSS列表样式属性

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

一只爱好编程的程序猿

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS列表

CSS列表CSS列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在HTML中，有两种类型的列表:无序列表-列表项标记用特殊图形有序列表-列表项的标记有数字和字母不同的列表项标记list-style-type属性指定列表项标记的类型是:<!DOCTYPE html><html><head><meta charset="utf-8"> <style&gt.
复制链接

扫一扫