HTML：列表文字颜色与列表嵌套

最新推荐文章于 2021-06-21 11:45:13 发布

_堇忆

最新推荐文章于 2021-06-21 11:45:13 发布

阅读量5.2k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/jinyiY/article/details/105745470

版权

1.列表文字颜色

在创建列表时，可以单独对某个列表设置文字颜色，这种设置样式的方式即为行内样式表。
语法：

<li><font color="颜色值">列表项</font></li>

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表字体颜色</title>
</head>

<body>
    <font size="+3" color="#006699">列表的分类</font><br />
    <ul>
        <li>
            <font color="pink">one</font>
        </li>
        <li>
            <font color="orange">two</font>
        </li>
        <li>
            <font color="blue">three</font>
        </li>
    </ul>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述

2.列表的嵌套

嵌套列表指的是多余一级层次的列表，一级项目下面可以存在二级项目、三级项目等，实现多级项目列表的形式。

2.1无序列表和有序列表的嵌套
这是最常见的列表嵌套模式，可重复使用ul和ol标记组合实现。
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表嵌套</title>
</head>

<body>
    <font color="#3333ff" size="+2">中国历史</font>
    <ul type="square">
        <li>
            <font color="#ff9900" size="+1">原始社会</font>
            <ol type="1">
                <li>黄帝</li>
                <li>尧</li>
                <li>舜</li>
            </ol>
        </li>
        <li>
            <font color="#ff9900" size="+1">奴隶社会</font>
            <ol type="1">
                <li>夏</li>
                <li>商</li>
                <li>周</li>
            </ol>
        </li>
    </ul>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
2.2有序列表之间的嵌套
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表嵌套</title>
</head>

<body>
    <font color="#3333ff" size="+2">中国历史</font>
    <ol type="A">
        <li>第一篇</li>
        <ol type="1">
            <li>第一章
                <ol type="I">
                    <li>第一节</li>
                    <li>第二节</li>
                    <li>第三节</li>
                </ol>
            </li>
            <li>第二章</li>
        </ol>
        <li>第二篇</li>
        <ol type="1">
            <li>第一章
                <ol type="I">
                    <li>第一节</li>
                </ol>
            </li>
            <li>第二章</li>
            <li>第三章</li>
        </ol>
    </ol>
</body>

</html>

代码运行结果如下图：
在这里插入图片描述
2.3自定义列表之间的嵌套
自定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，且不包含项目符号。
语法描述如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>名词一</dt>
        <dd>解释一</dd>
        <dd>解释二</dd>
        <dd>解释三</dd>
    </dl>
</body>
</html>