introduce
In this article, I will introduce to you how to use CSS and HTML to construct a tree-structured tree diagram. We use tree structures in many projects, such as energy consumption analysis, company organization charts, infinite-level classification, etc. The renderings are as follows:
html part build
The data structure of the tree diagram is a tree structure. We implement the page structure by nesting ul and li:
<div class="tree">
<ul>
<li>
<div class="box">
<div class="node node-type1">综合能效</div>
</div>
<ul class="line-large">
<li class="line-large">
<div class="box"><div class="node node-type2">能耗指标</div></div>
<ul class="line-large">
<li>
<div class="box">
<div class="node node-type3">
<div class="node-title1">总消耗</br>(t 标煤)</div>
<div class="node-target1">120</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">供冷系统</br>(t 标煤)</div>
<div class="node-target1">40</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">45%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">供热系统</br>(t 标煤)</div>
<div class="node-target1">35</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">65%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">三联供系统</br>(t 标煤)</div>
<div class="node-target1">36</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">45%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">其他</br>(t 标煤)</div>
<div class="node-target1">9</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">15%</div>
</div>
</div>
</li>
</ul>
</li>
<li class="box-right">
<div class="box">
<div class="node node-type3">
<div class="node-title1">节能量</br>(t 标煤)</div>
<div class="node-target1">150</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">三联供系统</br>(t 标煤)</div>
<div class="node-target1">90</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">45%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">可再生能源</br>(t 标煤)</div>
<div class="node-target1">60</div>
</div>
<div class="node node-type4 node-footer">
<div class="node-target2">65%</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="line-large">
<div class="box">
<div class="node node-type2">能效指标</div>
</div>
<ul class="line-large">
<li class="box-left">
<div class="box">
<div class="node node-type3">
<div class="node-title1">系统综合</br>能效</div>
<div class="node-target2">98%</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">供冷系统</br>综合能效</div>
<div class="node-target2">45%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">供热系统</br>综合能效</div>
<div class="node-target2">34%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">三联供系统</br>综合能效</div>
<div class="node-target2">20%</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type5">
<div class="node-title1">发电效率</div>
<div class="node-target2">20%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type5">
<div class="node-title1">余热利用</br>效率</div>
<div class="node-target2">80%</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="node node-type3">
<div class="node-title1">清洁能源</br>发电占比</div>
<div class="node-target2">90%</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">天然气</br>发电占比</div>
<div class="node-target2">45%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type4">
<div class="node-title1">可再生能源</br>发电占比</div>
<div class="node-target2">55%</div>
</div>
</div>
<ul>
<li>
<div class="box">
<div class="node node-type5">
<div class="node-title1">风力占比</div>
<div class="node-target2">50%</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="node node-type5">
<div class="node-title1">光伏占比</div>
<div class="node-target2">50%</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>css partial build
Use css style to generate connection lines at nodes (two elements can be generated before and after the node through the before and after attributes, and the connection between nodes can be realized by setting the width and edge to 50%)
.tree li
{
float:left;
text-align:center;
list-style-type:none;
position:relative;
transition:all .5s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
padding:30px 5px 0;/*上段竖线*/
position：relative;
}
.tree li::before,.tree li::after
{
content:'';
position:absolute;
top:0;
right:50%;
border-top:1px solid #56698A;/*横线*/
width:50%;
height:30px;/*上段竖线*/
}We set different styles for different nodes
.node
{
border:1px solid #26375F;
text-decoration:none;
color:#FFFFFF;
font-family:arial,verdana,tahoma;
font-size:.85em;
display:inline-block;
transition:all .5s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
padding:0.4em .4em;
}
.node-type1
{
font-size:1em;
background-color: #0089FD;
padding:0.2em 1.1em;
border-radius:0em .6em .6em .6em;
}
.node-type2
{
font-size:.9em;
background-color: #611DEE;
padding:0.3em 1.2em;
border-radius:0em .6em .6em .6em;
}
.node-type3
{
color:#00B7BB;
border-color:#00B7BB;
}
.node-type4
{
color:#9DF5FE;
border-color:#9DF5FE;
}
.node-type5
{
color:#85F79D;
border-color:#85F79D;
}
Project code 
https://download.csdn.net/download/qq243348167/85674034