列表的类型和样式
来自CloudWiki
- 页面中，列表用于提供结构化的、容易阅读的消息格式，可以帮助访问者方便地找到信息，并引起访问者对重要信息的注意。
- 列表可以分为：无序列表、有序列表和定义列表。
目录
列表的类型
无序编号列表
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
- 无序列表始于 <ul> 标签。每个列表项始于 <li>。
- '''<ui>、<li>元素都是块级元素。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
- 效果：
浏览器显示如下：
*Coffee *Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
- 试一试：W3C实例
代码：
<html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
有序编号列表
- 同样，有序列表也是一列项目，列表项目使用数字进行标记。
- 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
- 浏览器显示如下：
1.Coffee 2.Milk
- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
- 试一试：W3C实例
- 代码：
<!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html>
定义列表
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
- 试一试：W3C实例
- 代码：
<html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
有序和无序的嵌套列表
- 我们知道标签是可以嵌套的，所以列表也是可以嵌套的。当我们列表中的某些列表项是列表时，我们就可以用嵌套。
- 现在就通过一个例子来看看无序列表和有序列表是如何嵌套使用的吧：
- 源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用有序列表和无序列表</title>
</head>
<body>
<h1>省份城市</h1>
<ul>
<li>安徽省</li>
<li>北京市</li>
<li>重庆市</li>
<li>福建省</li>
<li>甘肃省
<ul>
<li>兰州市</li>
<li>嘉峪关市</li>
<li>金昌市</li>
</ul>
</li>
</ul>
</body>
</html>
- 结果是怎样的呢？通过W3C实例来看一下吧！
- 参考文档：
列表的样式
列表常用的样式属性
- list-style-type 符号类型;:
- list-style-position 符号位置
- list-style-image:url(图像URL);
- list-style:类型/url(图像url) 位置;
符号类型list-style-type
- 无序列表：
list-style-type: disc 实心圆，默认} list-style-type: circle 空心圆 list-style-type: square 实心方块 list-style-type: none 无
- 试一试：W3C实例
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
- 有序列表：
list-style-type: decimal 标记是数字 list-style-type: lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) list-style-type: upper-roman 大写罗马数字(I, II, III, IV, V, 等。) list-style-type: lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) list-style-type: upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
- 试一试：W3C实例
<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="uroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lalpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="ualpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>
list-style-position：符号的位置
- list-style-position 属性设置在何处放置列表项标记。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- 试一试：W3C实例
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>
list-style-image
- 用图像符号将替换列表项符号
- 例：
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}
- 请始终规定一个 "list-style-type" 属性以防图像不可用。
- 试一试：菜鸟教程实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul
{
list-style-image:url('http://www.sict.edu.cn/Templets/mode3/images/dot.jpg');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
返回 网页设计与开发
