阅读目录
- 源码
- HTML
源码
请到资源下载源码。
HTML
我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ul li组成，代码应该像这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="css,html" />
<meta name="description" content="wgchen演示" />
<title>演示：纯CSS和HTML打造树结构</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
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;
}
</style>
</head>
<body>
<div class="container">
<div class="row main">
<div class="col-md-12">
<h2 class="top_title">纯CSS和HTML打造树结构</h2>
<div class="row" style="margin-top: 30px">
<div class="col-md-offset-5 col-sm-12">
<ul class="tree">
<li>研发中心
<ul>
<li>北京研发部</li>
<li>深圳研发部
<ul>
<li>产品1组</li>
<li>产品2组</li>
</ul>
</li>
</ul>
</li>
<li>销售部
<ul>
<li>售前</li>
<li>售后</li>
<li>代理分区
<ul>
<li>东北区</li>
<li>华北区</li>
<li>华南区</li>
<li>华中区</li>
</ul>
</li>
</ul>
</li>
<li>财务部</li>
<li>人事部</li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<p>Powered by
</footer>
</div>
</body>
</html>我们要把这样一个无序列表转换成树状外观，需要使用 3 张小图片来连接各个节点，使得很容易看出各个节点间的层级关系，父子关系还是兄弟关系。
准备好三张小图片。
CSS
首先，我们给每个 <ul> 元素设置竖线图片，这样每个 ul 就有一条长长的竖线。
然后给每个 <li> 元素设置T型图片，最后一步，就是给最后一个 li 节点设置 L 型闭合树结构。