纯CSS和HTML打造树结构

源码

请到资源下载源码。

HTML

我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ul li组成，代码应该像这样：

DOCTYPE html>







演示：纯CSS和HTML打造树结构



 ul.tree, ul.tree ul {
     list-style-type: none;
     background: url(images/vline.png) repeat-y;
     margin: 0;
     padding: 0;
   }
   
   ul.tree ul {
     margin-left: 10px;
   }

    ul.tree li {
     margin: 0;
     padding: 0 12px;
     line-height: 20px;
     background: url(images/node.png) no-repeat;
     color: #369;
     font-weight: bold;
   }
   /*ul.tree li.last {
     background: #fff url(images/lastnode.png) no-repeat;
   }*/
    ul.tree li:last-child {
     background: #fff url(images/lastnode.png) no-repeat;
   }





	
		
			纯CSS和HTML打造树结构
			
			
                
                    
                        研发中心
                            
                                北京研发部
                                深圳研发部
                                    
                                        产品1组
                                        产品2组
                                    
                                
                            
                        
                        销售部
                            
                                售前
                                售后
                                代理分区
                                    
                                        东北区
                                        华北区
                                        华南区
                                        华中区
                                    
                                
                            
                        
                        财务部
                        人事部
                    
                
			

		
	
	
		Powered by 允许转载、修改和使用本站的DEMO，但请注明出处：wgchen.blog.csdn.net
	

    

我们要把这样一个无序列表转换成树状外观，需要使用 3 张小图片来连接各个节点，使得很容易看出各个节点间的层级关系，父子关系还是兄弟关系。

准备好三张小图片。

CSS 首先，我们给每个

元素设置竖线图片，这样每个 ul 就有一条长长的竖线。

然后给每个

• 元素设置T型图片，最后一步，就是给最后一个 li 节点设置 L 型闭合树结构。