html-列表实现

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

目标列表

列表实现的源代码参见github

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

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

   
   
JavaScript
    
   
Java

结果长成这样：

第一步结果图

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

    
     
JavaScript        
         
          
             
第一章
           
             
第二章
       
       
   
    
    
    
Java        
         
           
             
第一章
 
             
第二章
    
         
   
    

第二步实现结果图：

第二步结果图

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

JavaScript 
　 
       
     
第一章           
          

              
const
        
              
let
     
          
 
     
  
     
第二章 
          

              
function
              
object
         
      
     
   
   

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

第三步结果

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

小知识：

• 实现下面这样的无序列表在ul标签中加type="disc"或省略type不写
  
  

  黑点无序列表
• 实现这样的无序列表在ul标签中加type="circle"
  
  

  圆圈无序列表
• 实现这样的无序列表在ul标签中加type="square"
  
  

  方块无序列表