l-1

WEB教程

主页/CSS示例代码/CSS简单示例代码/CSS 列表 示例代码

aaa

CSS示例代码

CSS 列表 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS列表样式示例</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        /* 无序列表样式 */
        ul {
            list-style-type: square; /* 更改列表项符号为方块 */
            padding-left: 20px;
            background-color: #e0ffff;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        ul li {
            padding: 5px 0;
        }

        /* 有序列表样式 */
        ol {
            list-style-type: upper-roman; /* 使用大写罗马数字作为编号 */
            padding-left: 20px;
            background-color: #ffe4c4;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        ol li {
            padding: 5px 0;
        }

        /* 定义列表样式 */
        dl {
            background-color: #d1ffd1;
            border-radius: 5px;
            padding: 10px;
        }

        dt {
            font-weight: bold;
            margin-bottom: 5px;
        }

        dd {
            margin: 0;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <!-- 无序列表 -->
    <h2>无序列表示例</h2>
    <ul>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>橙子</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>胡萝卜</li>
                <li>西兰花</li>
                <li>菠菜</li>
            </ul>
        </li>
    </ul>

    <!-- 有序列表 -->
    <h2>有序列表示例</h2>
    <ol>
        <li>第一步：准备食材</li>
        <li>第二步：烹饪
            <ol>
                <li>加热锅具</li>
                <li>加入食材</li>
                <li>翻炒均匀</li>
            </ol>
        </li>
        <li>第三步：装盘</li>
    </ol>

    <!-- 定义列表 -->
    <h2>定义列表示例</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言（HyperText Markup Language），用于构建网页结构。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表（Cascading Style Sheets），用于描述文档的呈现方式。</dd>
    </dl>
</body>

</html>