html list style

作者：一剑绝尘发布日期:2025-04-05 浏览:49

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义无序列表的样式 */
        ul {
            list-style-type: square; /* 使用方块作为项目符号 */
        }

        /* 定义有序列表的样式 */
        ol {
            list-style-type: upper-roman; /* 使用大写罗马数字作为编号 */
        }
    </style>
</head>
<body>

<h2>HTML List Style 示例</h2>

<p>无序列表:</p>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<p>有序列表:</p>
<ol>
    <li>早餐</li>
    <li>午餐</li>
    <li>晚餐</li>
</ol>

</body>
</html>

解释说明：

无序列表 (ul)：通过 list-style-type: square; 设置了列表项使用方块作为项目符号。
有序列表 (ol)：通过 list-style-type: upper-roman; 设置了列表项使用大写罗马数字作为编号。

你可以根据需要调整 list-style-type 的值，以改变列表项的样式。

上一篇：html字体颜色

下一篇：html学习