多级列表

关于下面这个列表是如何实现的:

html如下:

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

思路

  • 分层
    很明显这里就只有三层。
最外层是一个无序列表
第二层是有序列表
第三层是无序列表
  • 编码
    按块进行分解,就是我们需要将所有的无序和有序列表都看成块。布局的时候就只需要搬这些块到相应的地方就可以了。
    PS:不用担心它们之间嵌套关系是否合理,因为li,ul,ol相互嵌套都是被允许的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容