无序列表
- 一.无序列表标签
- 1.无序列表介绍
- 2.无序列表标签的使用
- 二.无序列表
- 2.无序列表的标签
- 3.无序列表的属性
一.无序列表标签
1.无序列表介绍
列表分为两种类型：一种是有序列表；另一种是无序列表。前者使用编号来记录项目的顺序，而后者使用项目符号来标记无序的项目。
所谓有序列表，是指按照数字或字母顺序排列列表项目，如图1.1所示：
所谓无序列表，是指以全●、○、▽、▲等开头的，没有顺序的列表项目，如图1.2所示：
2.无序列表标签的使用
列表主要标签如下：
列表标签展示图5.2
标签 | 描述 |
<ul> | 无序列表 |
<ol> | 有序列表 |
<dir> | 目标列表 |
<dl> | 定义列表 |
<menu> | 菜单列表 |
<dt> 、<dd> | 定义列表的标签 |
<li> | 列表项目的标签 |
二.无序列表
在有序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dt> 、<menu>、<li>几个标签和type属性。
2.无序列表的标签
无序列表的特征在于提供一种不编号的列表方式，而在每个项目文字之间以符号作为分项标识。
具体语法如下：
<ul>
<li>第一项</li>
<li>第二项</li>
......
</ul>在该语法中，使用<ul></ul>标签来表示这个无序列表的开始和结束，而
- 标签则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。
下面使用无序列表定义词典的模式分类，新建一个H5文件，文件的具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<font size="+3" color="#0066ff">编程字典的模式分类</font>
<br>
<br>
<ul>
<li>入门模式</li>
<li>初级模式</li>
<li>中级模式</li>
<li>高级模式</li>
</ul>
</body>
</html>保存并运行这段代码，可以看到窗口中建立了一个无序列表，该列表中共包含四个列表项，如图2.3所示：
3.无序列表的属性
在默认情况下，无序列表的项目符号是是●，而通过type参数可以调整无序列表的项目符号，避免项目符号的单调。
具体语法如下：
<ul type="符号类型">
<li>第一项</li>
<li>第二项</li>
......
</ul>在该语法中，无序列表的其他属性不变，type属性则决定了列表项开始的符号。它可以设置的值有三个，如图3.1所示。其中，disc是默认的类型值。
类型值 | 列表项目的符号 |
disc | ● |
circle | ○ |
square | ■ |
新建一个h5文件，在文件的<body>标签中输入代码，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表属性</title>
<style>
*{margin:0;padding:0}
body{font-family:"微软雅黑";font-size:16px;}
.box{width:100%;max-width:1150px;background:#f5f5f5;margin:50px auto}
#ml0{margin-left:0px;}
.box .item{width:220px;height:320px;background:#fff;float:left;margin-left:10px;position:relative;overflow:hidden;}
.box .item p{text-align:center;padding:5px;}
.box .item p a{color:#333;text-decoration:none;}
.box .item .eval{background:#FF6700;padding:10px 30px;position:absolute;bottom:-68px;left:0px}
.box .item:hover .eval{bottom:0px;transition: bottom 0.3s ease; color:#fff;}
img{width:220px;height:200px;}
</style>
</head>
<body>
<div class="box">
<ul class="item">
<li><a href="#"><img src='images/荣耀1.jpg'/></a></li>
<li><p><a href="#">华为官网手机</a></p></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/荣耀2.jpg'/></a></li>
<li><p><a href="#">华为官网手机</a></p></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/荣耀3.jpg'/></a></li>
<li><p><a href="#">华为官网手机</a></p></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/荣耀4.jpg'/></a></li>
<li><p><a href="#">华为官网手机</a></p></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<ul class="item">
<li><a href="#"><img src='images/荣耀5.jpg'/></a></li>
<li><p><a href="#">华为官网手机</a></p></li>
<li class="eval">超好用，比我用过的耳机都好，声音简直是从脑子里发出的</li>
</ul>
<div class=""></div>
</div>
</body>
</html>代码如图所示：运行这段代码，可以看到项目符号属性可以设置为none，此时项目符号就不显示出来了。
当然，无序列表的类型定义也可以直接在<li>标签中，其语法是<li type=“项目符号”>，用于对单个项目进行定义，其代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<font size="+3" color="#0066ff">编程字典的模式分类</font>
<br>
<br>
<ul>
<li type="circle">入门模式</li>
<li type="disc">初级模式</li>
<li type="square">中级模式</li>
<li>高级模式</li>
</ul>
</body>
</html>由代码我们可以看到，在li标签中，我们当选择默认时，我们可直接省略disc的类型描述。如果在实际开发过程中，我们不需要无序列表的项目符号，则只需要将无序列表的列表项目的序号类型直接设为none即可，也可以在无序列表中的list-style属性设置为none。
