HTML5与CSS3学习笔记【第十五章列表】

最新推荐文章于 2024-04-03 22:37:58 发布

Luminous烁

最新推荐文章于 2024-04-03 22:37:58 发布

阅读量296

点赞数

分类专栏： html5 文章标签： css3 html5 学习

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125883176

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

第十五章列表

前言
15.1创建有序列表和无序列表
15.2选择标记
15.3使用定制的标记
15.4选择列表的起始编号
15.5控制标记的位置
15.6 同时设置所有的列表样式属性
15.7设置嵌套列表的样式
15.8创建描述列表

前言

HTML 包含专门用于创建项目列表的元素。你可以创建普通列表、编号列表、符号列表以及描述列表，可以在一个列表中嵌套另外一个或多个列表。
所有的列表都是由父元素和子元素构成的。父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。下面列出了三种列表类型以及组成它们的元素。

有序列表，ol 为父元素，li 为列表项。
无序列表，ul 为父元素，li 为列表项。
描述列表，dl 为父元素，dt 和 dd 分别代表 dl 中的术语和描述。描述列表
在HTML5 之前称为定义列表。在这些类型里面，无序列表是万维网上最为常见的列表类型，它也是对大多数类型的导航进行标记的事实标准。

在这里插入图片描述

15.1创建有序列表和无序列表

如果列表项的顺序对于列表来说非常关键，那么这种情况有序列表就是恰当的选择。有序列表适于提供完成某一任务的分步说明，或用于创建大型文档的大纲。总之，它适用于任何强调顺序的项目列表。

...
<body>
<h1>Changing a light bulb</h1>
<ol>
 <li>Make sure you have unplugged the 
➝ lamp from the wall socket.</li>
<li>Unscrew the old bulb.</li>
 <li>Get the new bulb out of the 
➝ package.</li>
 <li>Check the wattage to make sure 
➝ it's correct.</li>
<li>Screw in the new bulb.</li>
 <li>Plug in the lamp and turn it 
➝ on!</li>
</ol>
</body>
</html>

目前还没有对列表标题进行格式化的正式方法。大多数情况下，使用常规的标题或段落即可，就像下面的例子那样。按照惯例（并非必须），可以对列表项目进行缩进，表明它们是嵌套在ol里面的（对于 ul 也是这样的）。不过，这些缩进在页面中不会显示出来，页面中的显示是由应用到列表上的 CSS 控制的

无序列表恰好相反，且应用更为普遍，如果列表项的顺序不太重要就要使用无序列表。

...
<body>
<h1>Product Features</h1>
<ul>
<li>One-click page layout.</li>
 <li>Spell-checker for 327 
languages.
➝ </li>
<li>Image retouching tool.</li>
<li>Unlimited undos and redos.</li>
</ul>
</body>
</html>

无序列表中的项目与有序列表中的是相同的，只有 ul 元素是不同的

创建列表
(1) 输入 <ol>（有序列表）或 <ul>（无序列表）。对于有序列表，可以包含 start、type 和 reversed 这三个可选的属性。
(2)输入 <li> 以开始第一个列表项目。对于有序列表，可以包含可选的 value 属性。
(3) 添加要包含在列表项目内的内容（如文本、链接、img 元素等）。
(4) 输入 </li> 以结束列表项目。
(5) 对于每个新的列表项目，重复第 (2)步至第 (4) 步。
(6) 输入 </ol> 或 </ul>（与第 (1) 步中的开始标签对应）以结束列表。

15.2选择标记

创建列表时，无论是有序列表还是无序列表，都可以选择出现在列表项目左侧的标记的类型。
1. 选择标记
在样式表中，输入 list-style-type: marker，这里的marker 是以下属性值中的一种。
disc（圆点，●）
circle（圆圈，○）
square（方块，■）
decimal（数字，1、2、3……）
upper-alpha（大写字母，A、B、C……）
lower-alpha（小写字母，a、b、c……）
upper-roman（大写罗马数字， Ⅰ、Ⅱ、 Ⅲ、 Ⅳ ……）
lower-roman（小写罗马数字，i、ii、iii、iv……）

2. 显示无标记列表
在样式表规则中，输入 list-style-type: none。

15.3使用定制的标记

如果对使用圆圈、方块、圆点以及罗马数字这些标记感到厌倦，也可以使用图像创建自己定制的标记。要使用定制的标记，不必修改 HTML，仅需修改CSS。
使用定制的标记
(1) 在目标列表或列表项的样式规则中，输入 list-style: none; 以取消常规的标记。
(2) 在目标列表的样式规则中，设置margin-left 和 / 或 padding-left 属性，指定
列表项目缩进的大小。为了在不同的浏览器上实现相似的效果，通常需要同时设置这两个属性。注意，如果为内容设置了 dir=“rtl”，那么就应该设置 margin-right 和 padding-right 属性。关于在列表中使用 dir、lang 及从右至左的语言。
(3) 在目标列表的 li 元素的样式规则中，
输入background: url(image.ext) repeattype horizontal vertical;，其中image.ext 是要作为定制标记的图像的路径和文件名，repeat-type 是 no-repeat、repeat-x 和
repeat-y 中的一种（通常设为 no-repeat），horizontal 和 vertical 值表示列表项目中背景图像的位置。

15.4选择列表的起始编号

你可能希望列表的编号从默认值 1 以外的某个数字开始。

设置整个列表编号方案的初始值在 ol 开始标签中输入 start=“n”，这里的n 表示列表的初始值。
修改有序列表中某列表项目的编号在目标 li 项目内输入 value=“n”，这里的n 代表该列表项目的值。

...
<body>
<h1 class="hdg">Changing a light bulb (with a 
➝ few steps missing)</h1>
<ol start="2">
 <li>Unscrew the old bulb.</li>
 <li value="5">Screw in the new bulb. 
➝ </li>
 <li>Plug in the lamp and turn it on! 
➝ </li>
</ol>
</body>
</html>

在这个例子中，我略去了列表中的一些步骤，不过仍希望余下的步骤保持原有的编号。因此，整个列表从 2 开始编号（使用start=“2”），并将第二个项目的值设为 5（使用 value=“5”）。这两个属性都是可选的，也不一定要像这样同时使用

15.5控制标记的位置

默认情况下，列表会从（其父元素的）左侧进行缩进。标记可以位于整个文本块的外面（这是默认情况），也可以缩在文本块内（称为缩排）。

ul {
 list-style-position: inside;
}

将 list-style-position 设置为 inside可以改变显示方式
控制标记位置的步骤
(1) 在目标列表或列表项目的样式表规则中，输入 list-style-position:。
(2) 输入 inside 让标记缩在文本块内，或者输入 outside 让标记显示在列表项目文本的左边（这是默认的设置）。

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

同 background、border、font、outline 等属性一样，CSS 也为 list-style 提供了简写形式。它将 liststyle-type、list-style-position 和较少使用的 list-style-image 放到了一条属性中。
同时设置所有的列表样式属性的步骤
(1) 输入 list-style:。
(2) 如果需要，指定应出现在列表项目旁边的标记类型。
(3) 如果需要，指定标记应悬挂在列表段落之外或缩在文本块内。
(4) 如果需要，指定列表项目所用的定制图像标记。

15.7设置嵌套列表的样式

可以在一个列表中插入另一个列表，里面的列表就称为嵌套列表。对于有序列表和无序列表均可创建嵌套列表（混合在一起或单独嵌套）。此外，还有另外一种嵌套列表。

如果要按有序列表的结构创建大纲，或者需要按无序列表的结构创建带子菜单的导航，就会发现嵌套列表很有用。可以通过很多方式为嵌套列表设置样式，就像示例所展示的那样。
为嵌套列表设置样式的步骤
(1) 要设置最外层列表的样式，输入toplevel li {style_rules}，其中，toplevel
是最外层列表的类型（如 ol、ul），style_rules 是要应用的样式。
(2) 对于第二级列表，输入 toplevel 2ndlevel {style_rules}，其中，toplevel 对应于第 (1) 步中的toplevel，2ndlevel 则是第二级列表的类型，而style_rules 是它需要应用的样式。
(3) 对于第三级列表，输入 toplevel 2ndlevel 3rdlevel {style_rules}，其中，toplevel 和 2ndlevel 对应于第 (1) 步和第(2)步中的 toplevel 和 2ndlevel，3rdlevel 则是第三级列表的类型。而 style_rules 则是它需要应用的样式。
(4) 对于要设置样式的每个嵌套列表，继续以上述方法进行设置。可以在每个选择器末尾包含 li，从而直接定位列表项目，例如，第 (3) 步中的代码可以写作 toplevel 2ndlevel 3rdlevel li{style_rules}。

15.8创建描述列表

创建描述列表的步骤
(1) 输入 <dl>。
(2) 输入 <dt>。
(3) 输入需要描述或定义的单词或短语，包括任何额外的语义元素（如 dfn）。
(4) 输入</dt>以完成名–值组中的名称部分。
(5) 如果名 – 值组中有一个以上的名称或术语，可根据需要重复第 (2) 步至(4) 步。

Luminous烁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5与CSS3学习笔记【第十五章列表】

HTML 包含专门用于创建项目列表的元素。你可以创建普通列表、编号列表、符号列表以及描述列表，可以在一个列表中嵌套另外一个或多个列表。所有的列表都是由父元素和子元素构成的。父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。...
复制链接

扫一扫