Web|网页制作秘密武器之列表

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

引言

列表（list）是指是指在网页中讲相关信息以及条目的方式有序或无序排列而形成的表。常用的列表有无序列表（ul），有序列表（ol）和定义列表（dl）等，接下来，我们就一起来学习一下这些列表吧。

常用列表介绍

（1） 无序列表（ul）

没有特定顺序的列表项集合。在无序列表中各个列表项之间属于并列关系，没有先后顺序之分。

基本语法：

效果：

语法说明

1)在HTML文件中,可以利用成对的<ul></ul>标记来插入无序列表,中间的列表项标签<li></li >用来定义列表项序列。

2)使用无序列表标签ul的type属性(使用css的list-style)来代替,我们可以通过设置，指定其列表项的项目符号的样式,其取值及相对应的符号样式如下。

●disc：指定项目符号为一个实心圆点(默认值是disc,是否使用该值在浏览器中效果都一样。)

◎circle：指定项目符号为一个空心圆点。

■square：指定项目符号为一个实心方块。

none：无项目符号。

css样式：

（2） 有序列表（ol）

有特定顺序的列表项集合。在有序列表中各个列表项之间有先后顺序之分，它们之间以编号标记。

基本语法：

效果:

语法说明：

（1）在HTML文件中,可以利用成对的<ol></ol>标记来插入无序列表,中间的列表项标签<li></li >用来定义列表项顺序。

有序列表标记的type属性也应该用css的list-style来代替, 我们可以通过设置，指定其列表项前的项目编号的样式,其取值及相对应的编号样式如下。

·decimal:指定项目编号为阿拉伯数字(默认值是decimal)

·lower-alpha：指定项目编号为小写英文字母,

·upper-alpha指定项目编号为大写英文字母。

·lower-roman:指定项目编号为小写罗马数字

·upper-roman:指定项目编号为大写罗马数字

·none:无编号

css样式：

（3）定义列表（dl）

HTML中只要适当的插入<dl></dl>标记，即可自动生成定义列表。定义列表的每一项既没有项目符号也没有项目编号，它是通过缩进的形式使内容清晰。

基本语法：

效果：

语法说明：

（1) <dl>标签用来创建定义列表。

（2) dt用来创建列表中的每个元素标题,它只能在dl元素中组中。<dt>标签定义的内容将左对齐显示。

（3) dd用来创建列表元素的内容描述,它也只能在dl元素中使用。<dd>标标签定义的内容将相对于<dt>标签定义的内容向右缩进显示。

css样式示例：

（4）菜单列表：

列通常用于显示一个简单的单列列表，一般不做嵌套。它的使用方法与无序表类似，可以看作是无序列表的一种特殊形式。

基本语法：

效果：

结语

列表不仅仅可以用来呈现列表同时也可以格式化多项内容的显示，学会使用表格，才能使我们的页面内容更加直观而简洁。

参考文献

【1】朱金华《网页设计与制作》北京：机械工业出版社，2018

更多精彩文章：

算法|从阶乘计算看递归算法

算法|字符串匹配（查找）-KMP算法

JavaScript|脚本岂能随意放置

开发|优秀的Java工程师的“对象”一定不错

谈一谈|2019蓝桥杯回顾与分享

where2go 团队

微信号：算法与编程之美

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！