HTML 列表实现

作者: ittianbao | 来源:发表于2016-11-22 22:03 被阅读29次

    今天来讲一讲怎样用 HTML 来实现下面的列表。

    实现的列表

    第一步

    可以看到第一层 JavaScript 和 Java 两个是无序列表,无序列表使用 <ul>标签,所以可以先实现这两个:

    代码:

    <!DOCTYPE html><html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表实现</title>
    </head>
    <body>
    <ul>
        <li>
            JavaScript
        </li>
        <li>
            Java
        </li>
    </ul>
    </body>
    </html>
    

    运行结果:

    <ul><li>JavaScript</li><li>Java</li></ul>

    第二步

    下来可以看到第二层是包含在 <li> 标签里面的并且是有序列表,有序列表使用<ol>标签:

    代码:

    <ul>
        <li>JavaScript
            <ol>
                <li>第一章</li>
                <li>第二章</li>
            </ol>
        </li>
        <li>Java
            <ol>
                <li>第一章</li>
                <li>第二章</li>
            </ol>
        </li>
    </ul>
    

    运行结果:

    <ul><li>JavaScript<ol><li>第一章</li><li>第二章</li></ol></li><li>Java<ol><li>第一章</li><li>第二章</li></ol></li></ul>

    第三步

    可以看到第三层是包在第二层的 <li> 标签里且它是无序的,使用 <ul> 标签:

    代码:

    <ul>
        <li>JavaScript
            <ol>
                <li>第一章
                    <ul>
                        <li>const</li>
                        <li>let</li>
                    </ul>
                </li>
                <li>第二章
                    <ul>
                        <li>function</li>
                        <li>object</li>
                    </ul>
                </li>
            </ol>
        </li>
        <li>Java
            <ol>
                <li>第一章
                    <ul>
                        <li>class</li>
                        <li>package</li>
                    </ul>
                </li>
                <li>第二章
                    <ul>
                        <li>private</li>
                        <li>public</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
    

    运行结果:

    <ul><li>JavaScript<ol><li>第一章<ul><li>const</li><li>let</li></ul></li><li>第二章<ul><li>function</li><li>object</li></ul></li></ol></li><li>Java<ol><li>第一章<ul><li>class</li><li>package</li></ul></li><li>第二章 <ul><li>private</li><li>public</li></ul></li></ol></li></ul>

    这样就成功的实现了这样的列表。

    相关文章

      网友评论

      • 恐怕是小珠桃子:赞,来取经ing
        ittianbao: @不许叫我程旺财 学姐别闹😬
      • 6d96978eeefb:厉害,好像很轻松就把这道题完成了👍

        内容方面很好,只发现了一个错别字:第三部应该是第三步

      本文标题:HTML 列表实现

      本文链接:https://www.haomeiwen.com/subject/dqjmpttx.html