列表项目
在日常生活中随时随地可看到以列表形式展示的信息。在网页中使用列表，可以清楚的看到定义顺序、信息排序及信息的相对重要性。HTML提供了丰富的列表元素用于在HTML文档中建立列表。这些并列的信息（数据）称为项。项前可以加符号或序号，也可以是各项并列而不加任何记号。带序号的称为有序列表，带加重符序号的称为无序列表，各项并列而不加任何记号的称为定义列表。上述三种列表形式的有机组合，可实现多样化的页面效果。
操作：命令菜单中【文本】→【列表】
无序列表（Unordered List）：UL元素和LI元素
无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。
UL元素可用于创建一个以圆点等项目符号开始的无序列表。列表中的每一项用LI元素加以标识。LI的意思是List Item。
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<li>民俗概览</li> <li>壮族婚俗</li> <li>壮族食俗</li> <li>壮族节俗</li> |
|
有序列表（Ordered List）:OL元素和LI元素
有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<li>土木工程系 </li> <li>建筑学系</li> <li> 机电工程系</li> <li>计算机系</li> <li>经济管理系</li> |
|
定义列表（Definition List）:DL元素、DT元素和DD元素
定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。 为现有文本创建列表除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。
定义列表元素DL由一系列词语元素DT（definition title 定义标题）和定义元素DD（definition desription 定义描述）组成，DT和DD是成对出现的，也可以将多个DD元素与一个DT元素相匹配，但不能包含多个连续的DT元素。
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<dt>计算机网络技术</dt> <dd> 本专业培养掌握计算机网络系统基本知识和基本原理，具有较强操作能力，熟练进行网络规划、搭建、实施、管理与维护，并具有一定的网站建设和网页制作能力，并能快速跟踪计算机及网络新技术的应用型技术管理人员。 </dd> <dt> 计算机多媒体技术</dt> <dd> 本专业培养具备较强的计算机操作技能，能熟练进行平面设计、动画制作、视频处理、多媒体课件开发、网页制作及网站的创建与维护的高等技术应用性专门人才。 </dd> <dt> 软件技术</dt> <dd> 本专业以培养学生软件技术方向的职业技能为宗旨，以达到在实践中能够进行软件技术综合应用能力为目标的专科层次的复合应用型人才。 </dd> <dt> 计算机应用技术</dt> <dd> 本专业培养具有设计和实现数据库处理系统的能力，开发基于B/S和C/S工作方式的信息处理系统的能力，以及信息系统管理、规划和评价的能力，能快速跟踪计算机信息处理技术的复合型技术管理人才。 </dd> |
|
创建嵌套列表
嵌套列表是包含在其他列表中的列表。 设置项目列表属性使用“列表属性”对话框可以设置列表项的外观，包括编号样式、项目符号样式等。
ul嵌套ul实例
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<li>民俗概览</li> <li>壮族婚俗</li> <li>壮族食俗</li> <li>壮族节俗 <ul> <li>三月三</li> <li>春节</li> <li>牛魂节</li> </ul> </li> |
|
ol嵌套ol实例
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<li>土木工程系 </li> <li>建筑学系</li> <li> 机电工程系</li> <li>计算机系 <ol type="a"> <li> 软件技术专业</li> <li> 计算机应用技术专业</li> <li> 计算机多媒体技术专业</li> <li> 计算机网络技术专业</li> </ol> </li> <li>经济管理系</li> |
|
ul嵌套ol实例
| HTML代码 | 屏幕显示效果 |
|---|---|
|
<li>土木工程系 </li> <li>建筑学系</li> <li> 机电工程系</li> <li>计算机系 <ol type="1"> <li> 软件技术专业</li> <li> 计算机应用技术专业</li> <li> 计算机多媒体技术专业</li> <li> 计算机网络技术专业</li> </ol> </li> <li>经济管理系</li> |
|
Html列表标记
| 列表标记 | ||||
| <OL>…</OL> | 顺序列表 | 清单项目将以数字、字母顺序排列 | ||
| <UL>…</UL> | 无序列表 | 清单项目将以圆点排列 | ||
| <LI>…</LI> | 列表项目 | 每一标记标示一项清单项目 | ||
| <MENU> | 菜单列表 | 清单项目将以圆点排列，如<UL> | 反对 | |
| <DIR> | 目录列表 | 清单项目将以圆点排列，如<UL> | 反对 | |
| <DL>…</DL> | 定义列表 | 清单分两层出现 | ||
| <DT>…</DT> | 定义条目 | 标示该项定义的标题 | ||
| <DD>…</DD> | 定义内容 | 标示定义内容 | ||
CSS样式实例
ul { font-family: "隶书"; font-size: 18pt; list-style-type: none; margin-left: 1em; line-height: 1.5em; } .list { font-size: 16pt; list-style-type: disc; color: #CCCCCC;
|
 |
ul样式的设置（标签）
在【CSS 样式】面板中，单击面板右下角的【新建 CSS 规则】。
在【新建 CSS 规则】对话框中，从【选择器类型】选项中选择【标签】。
在【标签】文本框的下拉列表中选择要重新定义的ul标签。
在【定义在】弹出式菜单中，【选择仅对该文档】。
单击【确定】。
出现【CSS 规则定义】对话框，表示您可以设置 ul 的样式啦。在【类型】中确定文字的字体、大小、行高、颜色等。
在【CSS 规则定义】对话框中，执行下面的操作： 在分类中选择【类型】。
在【字体】文本框的下拉列表中，选择所需要的字体，还可以选择编辑字体列表添加所需的字体。
在【大小】文本框下拉列表中选择文字的为18 ，并在紧靠其右的下拉列表中选择dt(点数）单位。
在【行高】文本框中，输入 1.5（根据具体需要确定），并在紧靠其右的弹出式菜单中选择em（字体高度）。
在【颜色】文本框选择所需要的字体的颜色。
在【列表】中确定列表项目的前导符号
在【CSS 规则定义】对话框中，执行下面的操作：
在分类中选择【列表】。
在【类型】的下拉列表中选择“无”。
在【方框】中确定列表项目的边界
在【CSS 规则定义】对话框中，执行下面的操作：
在分类中选择【方框】。
在【边界】的【左】文本框中输入1，并在紧靠其右的下拉列表中选择em(字体高度）单位。
在属性全部设置好后，单击【确定】。
.list样式的设置（类）
在【CSS 样式】面板中，单击面板右下角的【新建 CSS 规则】。
在【新建 CSS 规则】对话框中，从【选择器类型】选项中选择【类】。该选项应该是默认选中的。
在【名称】文本框中输入 .list。 确保在单词list前键入句点 (.)。所有类样式必须以句点开头。
在【定义在】弹出式菜单中，【选择仅对该文档】。
单击【确定】。
出现【CSS 规则定义】对话框，表示您可以设置 .picleft 的类样式啦。
在【CSS 规则定义】对话框中，执行下面的操作：
在【类型】中确定文字的字体、大小、行高、颜色等
在【CSS 规则定义】对话框中，执行下面的操作：
在分类中选择【类型】。
在【大小】文本框下拉列表中选择文字的大小16 ，并在紧靠其右的弹出式菜单中选择dt(点数）。
还可以在【颜色】文本框选择字体的颜色，要求菜单字体的颜色要一致。
在【列表】中确定列表项目的前导符号
在【CSS 规则定义】对话框中，执行下面的操作：
在分类中选择【列表】。
在【类型】的下拉列表中选择“圆点”。
在属性全部设置好后，单击【确定】。