vscode——HTML的列表作业

最新推荐文章于 2025-06-11 11:18:57 发布

iheyu

最新推荐文章于 2025-06-11 11:18:57 发布

阅读量804

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签：嵌套列表 square 实心方块样式

本文链接：https://blog.youkuaiyun.com/iheyu/article/details/99828721

html 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何在VSCode中使用HTML实现不同类型的列表效果，包括无序列表的空心圆和实心方块样式，有序列表的罗马数字和字母标记，以及列表的嵌套操作。通过示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现下图无序列表效果：

苹果

香蕉
西瓜

空心圆的：苹果——>香蕉——>西瓜

实心方块：苹果——>香蕉——>西瓜

下面的代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
</head>
<body>
        <ul> 
                <li>苹果</li>
                <li>香蕉</li>
                <li>西瓜</li>
               
        </ul>
    <ul style="list-style-type:circle"> 

        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ul>

    <ul style="list-style-type:square"> 
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
           
    </ul>
</body>
</html>

2.实现下图有序列表：

好吃的排行榜

蔬菜
水果
肉

A.蔬菜

B.水果

c.肉

罗马数字大写：蔬菜——>水果——>肉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
</head>
<body>
    <h4>好吃排行榜</h4>
    <ol>
        <li>蔬菜</li>
        <li>水果</li>
        <li>肉</li>
    </ol>

    <ol style="list-style-type:upper-alpha">
            <li>蔬菜</li>
            <li>水果</li>
            <li>肉</li>
    </ol>

    <ol style="list-style-type:upper-roman">
            <li>蔬菜</li>
            <li>水果</li>
            <li>肉</li>
    </ol>
</body>
</html>

3.实现下图列表嵌套：

好吃的排行榜

蔬菜

空心圆：空心菜——>萝卜

2.水果

实心圆：苹果——>香蕉——>西瓜

3.肉

实心方块：鸡肉——>牛肉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
</head>
<body>
    <dl>
        <dt>好吃排行榜</dt>
        <ol>
            <li>蔬菜</li>
            <ul>
                <li>空心菜</li>
                <li>萝卜</li>
            </ul>
            <li>水果</li>
            <ul style="list-style-type:disc">
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>西瓜</li>
            </ul>
            <li>肉</li>
            <ul style="list-style-type:square">
                    <li>鸡肉</li>
                    <li>牛肉</li>
            </ul>
        </ol>
    </dl>

</body>
</html>

默认的样式吧list-style
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
disc : CSS1 默认值。实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大[写罗马数字
lower-alpha : CSS1 小写英文]字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenianl : CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic : CSS2 未支持。浅白的表意数字
georgian : CSS2 未支持。传统的乔治数字
lower-greek : CSS2 未支持。基本的希腊小写字母
hebrew : CSS2 未支持。传统的希伯莱数字
hiragana : CSS2 未支持。日文平[假名字符
hiragana-iroha : CSS2 未支持。日文平]假名序号
katakana : CSS2 未支持。日文片假名字符
katakana-iroha : CSS2 未支持。日文片假名序号
lower-latin : CSS2 未支持。小写拉丁字母
upper-latin : CSS2 未支持。大写拉丁字母