多级列表
2016-12-08 本文已影响0人
seafruit
多级列表
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相互嵌套都是被允许的。