整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
表标签有3种:1)dl,dd与dt(定义列表) 2)ol与li(有序列表) 3)ul与li(无序列表)前两者一般不怎么用,网页中运用最多的是第三种
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<dl>
<dt>河北</dt>
<dd>石家庄</dd>
<dd>秦皇岛</dd>
<dt>河南</dt>
<dd>郑州</dd>
<dd>新乡</dd>
</dl>
</body>
</html>它们两个都有一个type属性,用来设置序列的显示样式(在li前面显示),type的取值有:1(数字序号)A,a(大小写字母)I,i(大小写罗马数字)disc(实心原点)circle(空心圆圈)square(实心方块)
显示效果
有序与无序列表的区别就是type的默认值不同而已
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<dl>
<dt>河北</dt>
<dd>石家庄</dd>
<dd>秦皇岛</dd>
<dt>河南</dt>
<dd>郑州</dd>
<dd>新乡</dd>
</dl>============================================================<ol type="A">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>=============================================================<ul type="circle">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>注意:设置属性时考虑浏览器的兼容性
经过测试ol与ul列表在IE浏览器(IE10)下type的这几个取值都有相应的效果;在谷歌浏览器下ol列表只对type值为1、a、A、i、I有效果;ul列表只对type值为disc、circle、square有效果;其他的如苹果,火狐等浏览器自己测试(同一浏览器的不同版本不再测试)
谷歌在显示效果
2.1使用嵌套的ul或ol来模拟二级菜单,以后会通过js,css或者Asp.net实现动态的菜单
二级菜单
TML 支持有序、无序和定义列表
实例
无序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示无序列表。
有序列表
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
[/demo]
本例演示有序列表。
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
更多实例
不同类型的无序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
</body>
</html>
[/demo]
本例演示一个无序列表。
不同类型的有序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>
[/demo]
本例演示不同类型的有序列表。
嵌套列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示如何嵌套列表。
嵌套列表 2
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示更复杂的嵌套列表。
定义列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
[/demo]
本例演示一个定义列表。
列表标签
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。
篇我们学习CSS列表。
对于列表，大家并不陌生。比如下面的无序列表和有序列表。
在 HTML 中，最常用的两种列表的类型就是无序列表和有序列表，使用 ol 和 ul 元素实现。列表项通过列表元素属性，实现空心实心圆点和数字字母等不同的形式。
在 CSS 中，列表属性允许我们为有序列表、无序列表设置不同的列表项标记，甚至可以使用一个图像，还可以为列表和列表项添加背景颜色。
应用 list-style-type 属性设置不同的列表项标记。属性值有很多，
比如：
circle 空心圆点，
disc 实心圆点，
square 小方点，
decimal 数字，
upper-roman 大写罗马字母，
lower-alpha 小写字母等等。
举个例子。
创建创建 css-list.html 文件和 list-style.css 文件。打开 html 文件，构建基础代码，使用 emmet 命令：小括号 ul 大于 li 乘以3 再乘以3 (ul>li*3)*3。回车，创建了三组无序列表。给三个 ul 元素添加 class 属性，值分别为 a，b，c。给每个列表项填入一些文本。
HTML
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ul>
<ul class="c">
<li>大前端</li>
<li>前端架构</li>
</ul>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="e">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ol>
<ol class="f">
<li>大前端</li>
<li>前端架构</li>
</ol>
</body>拷贝这三组无序列表，将 ul 元素名称修改为 ol，三个 class 值改为 d，e，f。
打开 css 文件，定义选择器 ul.a，声明样式 list-style-type: circle，设置列表项标记为空心圆点。拷贝两组样式，修改选择器 ul.b，ul.c。修改 list-style-type 属性值分别为 disc，实心圆点，square 小方点。
无序列表效果就做好了！
定义选择器 ol.d，声明样式 list-style-type: decimal，设置列表项标记为数字。拷贝两组样式，修改选择器 ol.e，ol.f。修改 list-style-type 属性值分别为 upper-roman，大写罗马字母，lower-alpha 小写字母。
有序列表也实现了！
CSS
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: disc;
}
ul.c {
list-style-type: square;
}
ol.d {
list-style-type: decimal;
}
ol.e {
list-style-type: upper-roman;
}
ol.f {
list-style-type: lower-alpha;
}有关更多的 list-style-type，大家参照这个案例。
list-style-image 属性指定了一个图像作为列表项的标记。属性值为 url 小括号，括号里写入图片的路径 url('./xxx.gif') 。
举个例子。
在 html 里，拷贝第一组 ul，将 class 的值改为 g。在 css 里，定义选择器 ul.g，声明样式属性 list-style-image，值为 url 小括号，图片路径为当前目录下的 purple.gif。
看看效果，列表项用图片标记了！
除了更换列表项的标记，还可以设置标记的位置，通过 list-style-position 属性来实现。这个属性的值有两个：outside，表示标记在列表项之外。inside，表示标记在列表项内部。
举个例子。
在 html 里添加一个 h3 元素，填入一些文本。ul 点 h 大于 li 乘以 3 ul.h>li*3，创建一个无序列表，填入一些文本。拷贝这组列表，将 class 值改为 i。
在 css 里定义 ul.h 选择器，声明样式 list-style-position: outside。定义 ul.i 选择器，声明样式 list-style-position: inside。
仔细观察列表项标记的位置，如果这里画一条线，就一目了然了，outside，标记在列表内容的左侧，也是默认的位置。inside，标记在列表内容里面。
有时，我们不希望显示列表项标记，此时可以应用 list-style-type: none 来去掉他们。
再复制一组这个列表，将 class 值修改为 j。再定义选择器 ul.j，声明样式 list-style-type: none。
我们看，列表项标记消失了。
同样，列表属性也可以使用简写——list-style，被用来在一个声明中，设置所有的列表属性。属性值按照 list-style-type list-style-position list-style-image 顺序来书写，某个值缺省的话，就使用它的默认值。
复制两份列表，修改 class 值分别为 k，l （这个是艾奥）。
HTML
<ul class="k">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="l">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>定义选择器 ul.k，声明样式 list-style: square inside url("purple.gif")。再定义选择器 ul.l，声明样式 list-style: none。
这样的简写，同样可以定义列表项的标记样式，方便快捷。
我们还可以用颜色来装饰列表，使它们看起来更有趣。添加到 ol 或 ul 标签的任何样式都会影响整个列表，而添加到 li 标签的属性只会影响单个列表项。
在 html 中再复制两组列表，修改 class 的值分别为 m，n。
HTML
<ul class="m">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="n">
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ol>定义 ul.m 选择器，声明样式：background: #3399ff，padding: 20px。
定义 ol.n 选择器，声明样式：background: #ff9999，padding: 20px。
定义 ul.m li 选择器，声明样式：background: #cce5ff，color: darkblue，margin: 5px。
定义 ol.n li 选择器，声明样式：background: #ffe5e5，color: darkred，padding: 5px，margin-left: 35px。
这样，列表就装饰好了！
这里用到的 padding 和 margin 属性，给元素添加内外边距，我们在后面的课程里还会详细的研究。
CSS
ul.m {
background: #3399ff;
padding: 20px;
}
ol.n {
background: #ff9999;
padding: 20px;
}
ul.m li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
ol.n li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=73
*请认真填写需求信息，我们会在24小时内与您取得联系。
