CSS知识点汇总（第三篇：为网页添加列表）

最新推荐文章于 2024-09-29 23:49:31 发布

沐曦可期

最新推荐文章于 2024-09-29 23:49:31 发布

阅读量2.6k

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_62714412/article/details/122651891

版权

无序列表

知识点概述：无序列表是网页中最常用的列表，之所以称为"无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。

<ul>

<li>列表项1</i>
<li>列表项2</i>
<li>列表项3</i>

...</ul>

无序列表的type属性值：

总结:

1、不赞成使用无序列表的type属性，一般通过CSS样式属性替代。

2、< ul>< /uI>中只能嵌套<li>< /li>，直接在< ul>< /ul>标签中输入文字的做法是不被允许的。

有序列表

知识点概述：有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。

基本语法格式：

<ol>

<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
.....

</ol>

有序列表相关属性：

定义列表

知识点概述：定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<d>名词2<ldt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>

总结:

1、< dl>、< dt>、< dd>三个标签之间不允许出现其他标签。

2、< dI >标签必须与< dt >标签相邻。

定义列表实现图文混排

知识点概述：在网页设计中，定义列表常用于实现图文混排效果，其中< dt>< /dt>标记中插入图片,<dd> </dd>标记中放入对图片解释说明的文字。

实例演示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定义列表实现图文混排</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
			border: 0;
		}
		
		body{
			font-size: 18px;
			font-family: "微软雅黑";
			line-height: 39px;
			
		}
		
		span{
			color: blue;
		}
		
		dl{
			width: 900px;
			height: 260px;
			margin: 40px;
			padding: 20px;
			background:  #785BDC ;  
			margin: 20px auto;                 
		}
		
		dt{
			height: 252px;
			float: left;		
		}
		
		dd{
			width: 650px;
			height: 200px;
			float: right;
		}
		
		p{
			margin-top: 4px;
			text-indent: 2em;
		}
	</style>
</head>

<body>
	<dl>
		<dt><img src="../../../Documents/muxishiye/xiangrikui.jpg"></dt>
		<dd>
			<h2><span>向日葵</span>(学名:Helianthus annuus L.)</h2>
			<h3>—年生草本,高1~3.5米,最高可达9米。</h3>
			<p>野生向日葵栖息地主要是草原等开阔地区,它们沿着路边、田野、沙漠边缘和草地生长。在阳光充足、土壤潮湿的地方生长得最好。向日葵原产自南美洲，驯化种由西班牙人于1510年从北美洲带到欧洲，最初为观赏用。目前世界各国均有栽培。通过人工培育的向日葵在不同环境中形成了许多品种，特别在头状花序的大小、色泽及果实形态方面有许多差异。</p>
		</dd>
	</dl>
</body>
</html>

演示效果：

列表嵌套的应用

知识点概述：要想在列表项中定义子列表项就需要将列表进行嵌套。

实例演示：

<body>
	<h2>饮品</h2>
	
	<ul>
		<li> 咖啡
			
			<ol>
				<li>拿铁</li>
				<li>摩卡</li>
			</ol>
		</li>
		<li>茶
			<ul>
				<li>碧螺春</li>
				<li>龙井</li>
			</ul>
		</li>
	</ul>
</body>

演示效果：

list-style-type属性

知识点概述：在CSS中,list-style-type属性用于控制列表项显示符号的类型。

注意:由于各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用list-style-type属性。

实例：

<style>
ul{ list-style-type : square; }
ol{ list-style-type : hebrew; }
</style>

list-style-image属性

知识点概述：使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。

属性格式：

list-style-image:url();

实例演示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-image属性</title>
	<style>
		ul{
			list-style-image: url("../../../Documents/muxishiye/lizi.png");
		}
	</style>
</head>

<body>
	<h2>栗子功效</h2>
	<ul>	
		<li>抗衰老</li>
		<li>益气健脾</li>
		<li>预防骨质疏松</li>
	</ul>
	
</body>
</html>

实例效果：

总结：

1、list-style-image属性可以为各个列表项设置项目图像。

2、style-image 属性对列表项目图像的控制能力不强。因此，实际工作中不建议使用list-style-image 属性，常通过为<li>设置背景图像的方式实现列表项目图像

list-style-position属性

知识点概述：在CSS中,list-style-position属性用于控制列表项目符号的位置。

list-style-position的取值： 1、inside：列表项目符号位于列表文本以内。 2、outside：列表项目符号位于列表文本以外（默认值）。

总结：list-style-position属性用于控制列表项目符号的位置。（对列表项目图片也有用）

list-style属性

知识点概述：定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。

基本语法格式

list-style:列表项目符号 列表项 目符号的位置 css列表项目图像;

相当于：type position image都能同时定义。

知识补充：通常将list-style 的属性值定义为none，然后通过为标签设置背景图像的方式实现不同的列表项目符号。

背景图像定义列表项目符号

知识点概述：由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为列表标签设置背景图像的方式实现列表项目图像。

background:url(images/2.png) no-repeat 3px center;
/*为li设置背景图像*/

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）