ul、li列表简单实用代码实例-CSDN博客

利用ul和li可以实现列表效果，下面就是一个简单的演示。

代码如下:

 
          <!DOCTYPE html> 
         
 
          < 
          html 
          > 
         
 
          < 
          head 
          > 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
          </ 
          head 
          > 
         
 
          < 
          body 
          > 
         
 
          < 
          ul 
          > 
         
 
             
          < 
          li 
          >前端专区 
         
 
               
          < 
          ul 
          > 
         
 
                 
          < 
          li 
          >js教程</ 
          li 
          > 
         
 
                 
          < 
          li 
          >css教程</ 
          li 
          > 
         
 
                 
          < 
          li 
          >jquery教程</ 
          li 
          > 
         
 
               
          </ 
          ul 
          > 
         
 
             
          </ 
          li 
          > 
         
 
             
          < 
          li 
          >资源专区 
         
 
               
          < 
          ul 
          > 
         
 
                 
          < 
          li 
          >特效下载</ 
          li 
          > 
         
 
                 
          < 
          li 
          >移动下载</ 
          li 
          > 
         
 
                 
          < 
          li 
          >pc下载</ 
          li 
          > 
         
 
               
          </ 
          ul 
          > 
         
 
             
          </ 
          li 
          > 
         
 
             
          < 
          li 
          >交流专区 
         
 
             
          < 
          ul 
          > 
         
 
               
          < 
          li 
          >搜索优化</ 
          li 
          > 
         
 
               
          < 
          li 
          >seo专区</ 
          li 
          > 
         
 
               
          < 
          li 
          >站长交流</ 
          li 
          > 
         
 
             
          </ 
          ul 
          > 
         
 
             
          </ 
          li 
          > 
         
 
          </ 
          ul 
          > 
         
 
          </ 
          body 
          > 
         
 
          </ 
          html 
          > 
         

上面代码实现了对于列表实用的简单演示，上面的比较原生，有时候我们希望自己设置子条目左间距和是否具有条目前面的原点等等，代码实例如下:

 
          <!DOCTYPE html> 
         
          < 
          html 
          > 
         
          < 
          head 
          > 
         
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
          < 
          style 
          type 
          = 
          "text/css" 
          >  
         
          *{ 
         
          margin:0px; 
         
          padding:0px; 
         
          } 
         
          #box{margin:50px;} 
         
          #box>li>ul{ 
         
          margin-left:20px; 
         
          list-style:none; 
         
          } 
         
          </ 
          style 
          > 
         
          </ 
          head 
          > 
         
          < 
          body 
          > 
         
          < 
          ul 
          id 
          = 
          "box" 
          > 
         
          < 
          li 
          >前端专区 
         
          < 
          ul 
          > 
         
          < 
          li 
          >js教程</ 
          li 
          > 
         
          < 
          li 
          >css教程</ 
          li 
          > 
         
          < 
          li 
          >jquery教程</ 
          li 
          > 
         
          </ 
          ul 
          > 
         
          </ 
          li 
          > 
         
          < 
          li 
          >资源专区 
         
          < 
          ul 
          > 
         
          < 
          li 
          >特效下载</ 
          li 
          > 
         
          < 
          li 
          >移动下载</ 
          li 
          > 
         
          < 
          li 
          >pc下载</ 
          li 
          > 
         
          </ 
          ul 
          > 
         
          </ 
          li 
          > 
         
          < 
          li 
          >交流专区 
         
          < 
          ul 
          > 
         
          < 
          li 
          >搜索优化</ 
          li 
          > 
         
          < 
          li 
          >seo专区</ 
          li 
          > 
         
          < 
          li 
          >站长交流</ 
          li 
          > 
         
          </ 
          ul 
          > 
         
          </ 
          li 
          > 
         
          </ 
          ul 
          > 
         
          </ 
          body 
          > 
         
          </ 
          html 
          >