效果图：
源码：（未做移动端自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tree-diagram">
<ul>
<li class="tree-diagram_root">
<p>海关数据</p>
<ul>
<li>
<p>海关数据类型</p>
<ul class="menu-list-ul">
<li><p>海关申报数据</p></li>
<li><p>贸易提单数据</p></li>
<li><p>进口数据</p></li>
<li><p>出口数据</p></li>
<li><p>过境数据</p></li>
<li><p>海运数据</p></li>
<li><p>空运数据</p></li>
<li></li>
</ul>
</li>
<li>
<p>搜索方式</p>
<ul class="menu-list-ul">
<li><p>产品</p></li>
<li><p>hs编码</p></li>
<li><p>小语种查询</p></li>
<li><p>进口商</p></li>
<li><p>出口商</p></li>
<li><p>提单号</p></li>
<li><p>口岸</p></li>
<li><p>时间</p></li>
<li><p>国别</p></li>
<li></li>
</ul>
</li>
<li>
<p>数据查询</p>
<ul class="menu-list-ul">
<li><p>提关单记录</p></li>
<li><p>买家实时监控</p></li>
<li><p>同行实时监控</p></li>
<li><p>出口全球分析</p></li>
<li><p>进口商分析</p></li>
<li><p>出口商分析</p></li>
<li><p>产品分析</p></li>
<li><p>供应国分析</p></li>
<li><p>进口国分析</p></li>
<li></li>
</ul>
</li>
<li>
<p>开发工具</p>
<ul class="menu-list-ul">
<li><p>公司概况</p></li>
<li><p>联系邮箱</p></li>
<li><p>领英联系</p></li>
<li><p>WhatsApp</p></li>
<li><p>进出口详情分析</p></li>
<li><p>展会记录</p></li>
<li><p>LBS地理信息</p></li>
<li><p>B2B店铺</p></li>
<li><p>社媒动态</p></li>
<li><p>社媒监控</p></li>
<li></li>
</ul>
</li>
<li>
<p>开发模式</p>
<ul class="menu-list-ul">
<li><p>手动开发</p></li>
<li><p>半自动开发</p></li>
<li><p>全自动开发</p></li>
<li></li>
</ul>
</li>
<li>
<p>营销运营</p>
<ul class="menu-list-ul">
<li><p>邮件营销</p></li>
<li><p>二次邮件营销</p></li>
<li><p>SOP邮件自动化运营</p></li>
<li><p>WhatsApp营销</p></li>
<li><p>facebook营销</p></li>
<li><p>CRM商机管理</p></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
}
.tree-diagram{
max-width: 1440px;
margin: auto;
}
.tree-diagram ul {
display: flex;
position: relative;
/* Reset ul 样式*/
list-style-type: none;
margin: 0;
padding: 1rem 0.5rem 0rem 0.5rem;
}
.tree-diagram ul ul::before {
border-right: 1px solid rgba(0, 0, 0, 1);
content: '';
/* Position */
position: absolute;
top: 0;
right: 50%;
/* Size */
height: 1rem;
width: 50%;
}
.tree-diagram li {
display: flex;
flex-direction: column;
padding: 1rem 0.5rem 0rem 0.5rem;
position: relative;
/* Center the content */
align-items: center;
}
.tree-diagram li::before {
border-right: 1px solid rgba(0, 0, 0, 1);
border-top: 1px solid rgba(0, 0, 0, 1);
content: '';
/* Position */
position: absolute;
top: 0;
right: 50%;
/* Size */
height: 1rem;
/* height: 100%; */
width: 50%;
}
.tree-diagram li::after {
border-top: 1px solid rgba(0, 0, 0, 1);
content: '';
/* Position */
position: absolute;
top: 0;
right: 0;
/* Size */
width: 50%;
}
.tree-diagram li:first-child::before, .tree-diagram li:last-child::after {
/* Remove the top of border from the first and last items */
border-top: none;
}
/* Add a root item if you want */
li.tree-diagram_root{
padding: 0;
width: 100%;
}
li.tree-diagram_root::before {
border-right: none;
}
.tree-diagram_root p{
border: 1px solid #000000;
padding: 5px;
text-align: center;
}
.menu-list-ul{
display: block !important;
}
.menu-list-ul li {
transform: translateX(88px);
display: block;
text-align: center;
}
.menu-list-ul::before{
border-right: 1px solid rgba(0, 0, 0, 1);
content: '';
position: absolute;
top: 0;
/* right: 80px !important; */
right: 4.1666666vw !important;
height: 1rem;
width: 50%;
}
.menu-list-ul li::after{
border-top: 1px solid rgba(0, 0, 0, 1);
content: '';
position: absolute;
/* top: 32px; */
top: 1.6666666vw;
/* right: 135px; */
right: 7.03125vw;
width: 18%;
}
.menu-list-ul li::before {
border-right: 1px solid rgba(0, 0, 0, 1);
border-top: 0px solid rgba(0, 0, 0, 1);
content: '';
position: absolute;
/* top: -32px; */
top: -1.6666666vw;
/* right: 160px; */
right: 8.333333333vw;
/* height: 4rem; */
height: 100%;
width: 50%;
}
.menu-list-ul p{
/* width: 115px; */
width: 6vw;
}
.menu-list-ul li:nth-child(1)::before{
/* top: -16px !important; */
top: -0.8333333vw !important;
}
@media (max-width: 768px) {
}
</style>
