html-列表实现

今天，我要实现的列表是这样的：

目标列表

列表实现的源代码参见github

完成这个列表我们来拆分一下任务吧，这个列表从外向里可划分为３层。

１．实现最外层的无序列表，代码是这样的：

<ul>   
   <li>JavaScript</li>    
   <li>Java</li>
</ul>

结果长成这样：

第一步结果图

２．实现中间层的有序列表，代码是这样的：

<ul>    
     <li>JavaScript        
         <ol>          
             <li>第一章</li>           
             <li>第二章</li>       
       </ol>   
    </li>    
    <li>Java        
         <ol>           
             <li>第一章</li> 
             <li>第二章</li>    
         </ol>   
    </li>
</ul>

第二步实现结果图：

第二步结果图

3.实现第三层的无序列表，代码长这样(这里是部分代码哦，在第二步的基础上增加)：

<li>JavaScript 
　 <ol>       
     <li>第一章           
          <ul type="square">
              <li>const</li>        
              <li>let</li>     
          </ul> 
     </li>  
     <li>第二章 
          <ul type="square">
              <li>function</li>
              <li>object</li>
         </ul>      
     </li>   
   </ol>
</li>

第三步的实现的结果是这样的：

第三步结果

好了，就这样三步这个简单的列表就完成了

小知识：

• 实现下面这样的无序列表在ul标签中加type="disc"或省略type不写
  黑点无序列表
• 实现这样的无序列表在ul标签中加type="circle"
  圆圈无序列表
• 实现这样的无序列表在ul标签中加type="square"
  方块无序列表