网站设计师如何正确处理“网站有序列表问题”

当前位置：

主页

网站制作资讯

建站行业资讯

网站设计师如何正确处理“网站有序列表问题”

发布时间：2018-09-14

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

网站制作公司（博纳网络）在上篇文章中分享了，网站前端制作时对于列表样式的分类，详细介绍了无序列表样式的几种展现形式以及避免错误操作方法。深圳网站制作公司在今天的文章中以图文并举的方式介绍网站设计时有序列表的制作方法。

一、网站制作前端之有序列表：

成绩单是大家比较熟悉的有序列表了，从第一名一直排到最后一名。有序列表，相对于无序列表而言，最大的区别就是有序列表是带有排名性质的列表，如图4.3所示。

<ol>

</ol>

<ol>标签表示有序列表的集合，其必须包含<li>标签，具体形式与无序列表一样，但浏览器解析有序列表时的默认效果却是不同的。有序列表也可分为一级有序列表和多级无序列表，浏览器默认解析时都是将有序列表以阿拉伯数字表示，并增加缩进，如图4.4所示为一级有序列表。

<ol>

<li>一级有序列表默认解析效果</li>

</ol>图4.3　有序列表简单示例图4.4　

一级有序列表默认解析效果

多级有序列表在浏览器中默认解析效果如图4.5所示。

图4.5

　多级有序列表默认解析效果有序列表在多级的情况下，理论上应该是随着层级的增加而出现1.1或者1.1.1之类的数字，但浏览器却无法在网页中直接解析出这样的效果，如果需要使用1.1或者1.1.1之类的数字表示方式，那么就只能使用CSS、JavaScript或者手工加入。

【示例】在上面示例基础上，在文档中添加如下CSS样式代码，可以设计数字目录效果，如图4.6所示。

设计多级有序列表目录效果4.1.3　自定义列表顾名思义，自定义列表就是以自定义形式定义的列表。在HTML中自定义列表用<dl>标签表示，在<dl>标签中包含<dt>标签和<dd>标签，一个<dt>标签对应多个或者一个<dd>标签。HTML结构如下：<dl><dt>自定义列表标题</dt><dd>自定义列表内容</dd></dl>或者：<dl><dt>自定义列表标题</dt><dd自定义列表内容></dd><dd>自定义列表内容</dd></dl>也可以是一组自定义列表项目：

<dl><dt>自定义列表标题</dt><dd>自定义列表内容</dd><dt>自定义列表标题</dt><dd>自定义列表内容</dd><dd>自定义列表内容</dd><dd>自定义列表内容</dd></dl>无论是以哪种形式，都应该注意下面几个问题：
.<dl>标签必须与<dt>标签相邻，<dd>标签需要相对于一个<dt>标签。
.<dl>、<dt>、<dd>3个标签之间不允许出现其他标签。标签必须是成对出现，嵌套要合理。<dl>标签是自定义列表集合，<dt>是自定义列表标题，<dd>是自定义列表的内容，因此自定义列表<dl>标签一般都出现在名词性解释的信息中。

【示例】当需要介绍花圃中花的种类时，就可以采用自定义列表的形式。