Paste_Image.png
写这个的时候主要是用<ul-li>与<ol-li>相互嵌套做的.
第一步先用<ul-li>实现最外层的列表.
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
结果如下:
<ul的实现>
第二步在JavaScript和Java中都嵌套<ol-li>这个tag
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
<li>Java</li>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</ul>
结果如图:
`<ul>`中嵌套`<ol>`的实现
最后一步就是在各自的第一章与第二章下各嵌套一个<ul-li>标签
<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>
所以这就得到了我们需要的列表啦!
**-
以下来介绍一下有关他们两的区别.
ul与ol
ul-li是没有前后顺序的信息列表。
结果如下:
<ul>
<li>数据结构难</li>
<li>数据结构真难</li>
<li>数据结构真不会</li>
</ul>```
如上代码所显示出来的是:
- 数据结构难
- 数据结构真难
- 数据结构真不会
ol-li是有前后顺序的信息列表
<ol>
<li>数据结构难</li>
<li>数据结构真难</li>
<li>数据结构真不会</li>
</ol>```
如上代码所显示出来的是:
- 数据结构难
- 数据结构真难
- 数据结构真不会
-
当然,ul与ol**之间也是可以相互嵌套滴!
懂了吧!
