列表的实现

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>```
如上代码所显示出来的是:

1. 数据结构难
2. 数据结构真难
3. 数据结构真不会
   -
   当然,ul与ol**之间也是可以相互嵌套滴!

懂了吧!