打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Web|网页制作秘密武器之列表
引言
列表(list)是指是指在网页中讲相关信息以及条目的方式有序或无序排列而形成的表。常用的列表有无序列表(ul),有序列表(ol)和定义列表(dl)等,接下来,我们就一起来学习一下这些列表吧。
常用列表介绍
(1)  无序列表(ul)
没有特定顺序的列表项集合。在无序列表中各个列表项之间属于并列关系,没有先后顺序之分。
基本语法:
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
效果:
语法说明
1)在HTML文件中,可以利用成对的<ul></ul>标记来插入无序列表,中间的列表项标签<li></li >用来定义列表项序列。
2)使用无序列表标签ul的type属性(使用css的list-style)来代替,我们可以通过设置,指定其列表项的项目符号的样式,其取值及相对应的符号样式如下。
●disc:指定项目符号为一个实心圆点(默认值是disc,是否使用该值在浏览器中效果都一样。)
◎circle:指定项目符号为一个空心圆点。
■square:指定项目符号为一个实心方块。
none:无项目符号。
css样式:
ul{list-style:<!—项目符号样式-->  }
(2)  有序列表(ol)
有特定顺序的列表项集合。在有序列表中各个列表项之间有先后顺序之分,它们之间以编号标记。
基本语法:
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
效果:
语法说明:
(1)在HTML文件中,可以利用成对的<ol></ol>标记来插入无序列表,中间的列表项标签<li></li >用来定义列表项顺序。
有序列表标记的type属性也应该用css的list-style来代替, 我们可以通过设置,指定其列表项前的项目编号的样式,其取值及相对应的编号样式如下。
·decimal:指定项目编号为阿拉伯数字(默认值是decimal)
·lower-alpha:指定项目编号为小写英文字母,
·upper-alpha指定项目编号为大写英文字母。
·lower-roman:指定项目编号为小写罗马数字
·upper-roman:指定项目编号为大写罗马数字
·none:无编号
css样式:
ol{list-style:<!—项目编号样式--> }
(3)定义列表(dl)
HTML中只要适当的插入<dl></dl>标记,即可自动生成定义列表。定义列表的每一项既没有项目符号也没有项目编号,它是通过缩进的形式使内容清晰。
基本语法:
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
...
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
...
</dl>
效果:
语法说明:
(1)  <dl>标签用来创建定义列表。
(2)  dt用来创建列表中的每个元素标题,它只能在dl元素中组中。<dt>标签定义的内容将左对齐显示。
(3)  dd用来创建列表元素的内容描述,它也只能在dl元素中使用。<dd>标标签定义的内容将相对于<dt>标签定义的内容向右缩进显示。
css样式示例:
dt{font-weight:bold<!—加粗--> }
(4)菜单列表:
列通常用于显示一个简单的单列列表,一般不做嵌套。它的使用方法与无序表类似,可以看作是无序列表的一种特殊形式。
基本语法:
<menu>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</menu>
效果:
结语
列表不仅仅可以用来呈现列表同时也可以格式化多项内容的显示,学会使用表格,才能使我们的页面内容更加直观而简洁。
参考文献
【1】朱金华《网页设计与制作》北京:机械工业出版社,2018
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HTML CSS + DIV实现局部布局
谈谈网站导航 CSS二级下拉菜单(能与IE6兼容)
DIV+CSS中标签ul ol li dl dt dd用法 - ayajenson - 博
HTML 中的列表
CSS 参考手册(9)
深入理解css中的position定位和z-index属性-div+css重构 by al...
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服