前端Demo|整齐的文本列表制作|适合学习前端一个月的同学

微笑的小小刀

发布于 2022-04-12 15:32:21

3920

发布于 2022-04-12 15:32:21

文章被收录于专栏：java技术大本营java技术大本营

准备工作

开发工具:Visual Studio Code（官网下载）

网址https://code.visualstudio.com/Download

记得勾选这些内容哦！！!

安装插件：

Chinese（语言包哈，会英语不用安）重启之后就可以用了

Live Server ：可在网页查看代码效果（代码保存“ctrl+S”后可在网页自动更新效果）

Open in browser：同上，但无法自动更新效果

鼠标右键打开，点击使用

先键入"!"，生成基本框架

如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本列表</title>
</head>
<body>

</body>
</html>

然后就可以在<body>标签中写你想要的效果啦

无序列表

无序列表常见于项目说明中，是一种并列关系的列表，结合CSS的修饰作用，可表现为导航栏。无序列表以<ul>标签开始，</ul>标签结束，在<ul>标签中，还需使用<li>标签来定义列表的列表项。

例：制作信息登录页面

<body style="text-align: center;">
<!-- 列表居中 -->
    <h3>个人简介</h3>
    <ul>
        <li>姓名:___________</li>
        <li>年龄:___________</li>
        <li>性别:___________</li>
    </ul>
</body>

效果：

有序列表

有序列表可用编号进行排序，使用<ol>标签，以<ol>开始，到</ol>结束。和无序列表一样，内部使用<li>标签来定义列表的列表项。

更改上面的例子，效果如下：

定义列表

定义列表是一种缩进样式的列表，用于定义术语。代码使用<dl>标签来创建定义列表，<dt>定义列表项，<dd>定义条目解释（默认缩进行）。

例：

<h3>镜头画面的剪辑</h3>
    <dl>
        <dt>分剪</dt>
        <dd>一个镜头分为两个镜头或者两个以上的镜头使用。</dd>
        <dt>挖剪</dt>
        <dd>将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上的多余的部分挖去。</dd>
        <dt>拼剪</dt>
        <dd>将一个镜头重复拼接。</dd>
    </dl>

效果：

列表嵌套

列表嵌套就是列表里面还有列表，是一种父子级的关系。

下面通过制作书籍目录的例子，来说明

<h3>四大名著</h3>
    <ul style="list-style-type: disc;">
        <!-- 定义无序列表的项目符号 -->
        <li>列表一
            <ul style="list-style-type: circle;">
                <li>《三国演义》
                    <ul style="list-style-type: square;">
                        <li>第 一 回 宴桃园豪杰三结义 斩黄巾英雄首立功</li>
                        <li>第 二 回 张翼德怒鞭督邮 何国舅谋诛宦竖</li>
                        <li>第 三 回 议温明董卓叱丁原 馈金珠李肃说吕布</li>
                    </ul>
                </li>
                <li>《水浒传》
                    <ol>
                        <li>第 一 回 张天师祈禳瘟疫 洪太尉误走妖魔</li>
                        <li>第 二 回 王教头私走延安府 九纹龙大闹史家村</li>
                        <li>第 三 回 史大郎夜走华阴县 鲁提辖拳打镇关西</li>
                    </ol>
                </li>
            </ul>
            <ol style="list-style-type: upper-roman;">
                <li>《西游记》
                    <ul>
                        <li>第 一 回 灵根孕育源流出 心性修持大道生</li>
                        <li>第 二 回 悟彻菩提真妙理 断魔归本合元神</li>
                        <li>第 三 回 四海千山皆拱伏 九幽十类尽除名</li>
                    </ul>
                </li>
                <li>《红楼梦》
                    <ol style="list-style-type: upper-alpha;">
                        <li>第 一 回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</li>
                        <li>第 二 回 贾夫人仙逝扬州城 冷子兴演说荣国府</li>
                        <li>第 三 回 托内兄如海见西宾 接外孙贾母惜孤女</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ul>

效果：