小菜鸡的html初步教程（第十五章列表）

最新推荐文章于 2024-10-20 09:22:05 发布

原创最新推荐文章于 2024-10-20 09:22:05 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html基础 #css基础

本博客主要讲解HTML5中列表的创建与样式设置，包括有序列表和无序列表的创建、选择标记、使用定制标记、选择起始编号、控制标记位置、同时设置样式属性、设置嵌套列表样式以及创建描述列表等内容，后续将开始讲表单进入交互界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小菜鸡的第六篇博客

本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
今天是个周五，然后国务院发了通知，说劳动节放假从一天延长到了四天，再加上我星期二只有上午有课，相当于放了四天半，稍稍的开心一下，希望那个时候的我能够不是为了期中考试而哭泣。。。。
话说我会在期中考试的时候更新数据结构的期末试卷解析，题库源自《南昌大学软件学院2014-2015年数据结构期末考试试卷》如果有人也在学习数据结构的话可以等我更新解析。

言归正传

本章讲的是关于HTML5中创建列表，比如有序列表和无序列表。这一章的东西不多，下一章的东西会很多，下一章就要开始讲表单了，开始正式进入交互界面。

创建有序列表和无序列表
选择标记
使用定制的标记
选择列表的起始编号
控制标记的位置
同时设置所有的列表样式属性
设置嵌套列表的样式
创建描述列表

1. 创建有序列表和无序列表

创建列表，这个时候我们就要用上ol（有序列表）ul（无序列表）li（列表元素）

<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
</ol>

在这里插入图片描述
就是这样。一个是圆点（后面会讲到怎么将圆点改成其他的东西）一个是数字（这个也可以改）

2. 选择标记

对，就是现在开始讲怎么更换列表样式（就是看起来更加花里胡哨）

.aa{
	list-style-type:armenian;}
	.bb{
	list-style-type:decimal;}
	.cc{
	list-style-type:georgian;}
	.dd{
	list-style-type:hiragana-iroha;}
	.ee{
	list-style-type:square;}
	.ff{
	list-style-type:upper-alpha;}

<ol>
<li class="aa">11</li>
<li class="bb">22</li>
<li class="cc">33</li>
<li class="dd">44</li>
<li class="ee">55</li>
<li class="ff">66</li>
</ol>

在这里插入图片描述
这就是最终效果图，实际上还有很多种，这只是其中的一小部分。

3. 使用定制的标记

当然如果你觉得这些还是不够花里胡哨，毕竟年轻人嘛，总是喜欢些不同的东西，那么现在你就可以自己定义样式了

ul{
	list-style:none;
	margin-left:0;
	padding-left:0;}
li{
	background:url(2.jpg)
	no-repeat 0 .1em;让图像在列表项目内显示的位置稍微往下一点
	line-height:1.8;让行高变大，从而可以容纳整个标记
	padding-left:1.75em;}将文本推开，为标记腾出位置

<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ol>

在这里插入图片描述
最终的效果图就是这样了，其中对ul定义的元素list-style:none;，清除了ul自身的格式（即使原本有的小黑点被清除了）

4. 选择列表的起始编号

</ul>
<ol start="2">
<li>11</li>
<li value="5">22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ol>

在这里插入图片描述
如上所示，我在ol中添加了start="2"属性，列表便从2开始计数，当我在li中添加value=“5”，不论实际上到了哪儿，都会指向我所输入的值，并且后续的都会从我所指定的值开始计数

5. 控制标记的位置

默认情况下，标记和文本是分开的，但是如果你想让它观赏性没那么强，那么你可以试试下面的这个（当然如果某些特定情况需要这么做那你就这样做）

<ol start="2">
<li>11111111111111111111111111111111111</br>11111111111111111111111</br>111111111111111111111111111111111111111111</br>111111111111111111111111111111111111111111</li>
<li value="5">22</li>
<li>33</li>
</ol>

在这里插入图片描述
这是原本的（不要在意我为了让他换行做了些什么）

ol{
	list-style-position:inside;}

在这里插入图片描述
这是我为ol格式添加了属性之后呈现的状态，可以看出序号直接嵌套在文本内了。

6. 同时设置所有的列表样式属性

这个呢，讲的依旧是简写，就是在一行格式中为所有的元素格式化。

ol{
	list-style:circle inside;}

在这里插入图片描述
就是这样，通过list-style:circle inside;同时把列表的序号改为了circle并使序号内嵌。

7. 设置嵌套列表的样式

这里讲的是一个列表内嵌套另外一个列表。并为列表中的列表设置格式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Styling Nested Ordered Lists</title>
	<link rel="stylesheet" href="css/nested-lists.css" />
</head>
<body>

<h1 class="hdg">The Great American Novel</h1>

<ol>
	<li>Introduction 
		<ol>
			<li>Boy's childhood</li>
			<li>Girl's childhood</li>
		</ol>
	</li>
	<li>Development 
		<ol>
			<li>Boy meets Girl</li>
			<li>Boy and Girl fall in love</li>
			<li>Boy and Girl have fight</li>
		</ol>
	</li>
	<li>Climax 
		<ol>
			<li>Boy gives Girl ultimatum 
				<ol>
					<li>Girl can't believe her ears</li>
					<li>Boy is indignant at Girl's indignance</li>
				</ol>
			</li>
			<li>Girl tells Boy to get lost</li>
		</ol>
	</li>
	<li>Denouement</li>
	<li>Epilogue</li>
</ol>

</body>
</html>

/* :::: Not shown in book - just a little font and spacing treatment :::: */
body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

.hdg {
	font-size: 1.25em;
	margin-bottom: 0;
}

.hdg + ol { /* like h1 + ol */
	margin-top: .5em;
}


/* :::: Code from book example :::: */
/* Set markers */
ol {
	list-style-type: upper-roman;
}

ol ol {
	list-style-type: upper-alpha;
}

ol ol ol {
	list-style-type: decimal;
}

/* Set font sizing */
ol li {
	font-size: .875em;
}

li li {
	font-size: 1em; /* prevent shrinking text! */
}

在这里插入图片描述
上面这一大堆，就是列表的嵌套。

8. 创建描述列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Nested Description List</title>
	<link rel="stylesheet" href="css/description-list-nested.css" />
</head>
<body>

<h1>Credits for <cite>Amélie</cite></h1>

<dl>
	<dt>Director</dt>
	<dd>Jean-Pierre Jeunet</dd>

	<dt>Writers</dt>
	<dd>Guillaume Laurant (story, screenplay)</dd>
	<dd>Jean-Pierre Jeunet (story)</dd>

	<dt>Cast</dt>
	<dd>
		<!-- Start nested list -->
		<dl>
			<dt>Audrey Tautou</dt> <!-- Actor/Actress -->
			<dd>Amélie Poulain</dd> <!-- Character -->

			<dt>Mathieu Kassovitz</dt>
			<dd>Nino Quincampoix</dd>
		</dl>
		<!-- end nested list -->
	</dd>
</dl>

</body>
</html>

body {
	font-family: Verdana, Geneva, sans-serif;
}

h1 {
	font-size: 1.75em;
}

dt {
	font-weight: bold;
	text-transform: uppercase;
}

/* style the dt of any dl within another dl */
dl dl dt {
	text-transform: none;
}

/* style a dt that follows a dd immediately */
dd + dt {
	margin-top: 1em;
}

在这里插入图片描述
dldtdd这三个便是描述列表的关键元素，其中dtdd这俩需要嵌套在 dl中，并且需要先有dt才能出现dd，其中dt默认情况下向左对齐，dd则会有缩进。而嵌套时 dl可以嵌套在dd中，并且在默认情况下，当一个dl嵌套在另一个dl中时，嵌套的列表会自动进行缩进。