无序列表的介绍

作者：很楠不爱3 | 2024-03-28 08:21:24

踩

无序列表

一.无序列表标签
- 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>
1
2
3
4
5

在该语法中，使用<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

保存并运行这段代码，可以看到窗口中建立了一个无序列表，该列表中共包含四个列表项，如图2.3所示：
在这里插入图片描述

3.无序列表的属性

在默认情况下，无序列表的项目符号是是●，而通过type参数可以调整无序列表的项目符号，避免项目符号的单调。
具体语法如下：

<ul type="符号类型">
	<li>第一项</li>
	<li>第二项</li>
	......
</ul>
1
2
3
4
5

在该语法中，无序列表的其他属性不变，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

代码如图所示：运行这段代码，可以看到项目符号属性可以设置为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

由代码我们可以看到，在li标签中，我们当选择默认时，我们可直接省略disc的类型描述。如果在实际开发过程中，我们不需要无序列表的项目符号，则只需要将无序列表的列表项目的序号类型直接设为none即可，也可以在无序列表中的list-style属性设置为none。
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/328855