如何使用HTML标签实现多级列表

实现效果

多级列表效果图

详细实现思路

首先这是一个三级列表,第一级列表为JavaScript和Java,为无序列表,使用HTML中的ul标签显示,内容写在li标签中。
第二级列表为第一章和第二章,第二级列表与第一级列表是嵌套关系,在一级列表的li标签中嵌套一个有序列表,使用HTML中的ol标签显示,同样地,内容书写在li标签中。
第三级列表为const和left等等,第三级列表与第二级列表是嵌套关系,在二级列表的li标签中嵌套一个无序列表,使用HTML中的ul标签显示,内容写在li标签中。

实现代码

实现该多级列表的核心代码如下:

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容