HTML、CSS实现树状图

凉风听雪2024-09-10 10:31

效果图：

源码：（未做移动端自适应）

html 复制代码 
<!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>
相关推荐
IT瘾君1 小时前
JavaWeb：Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程（反查重优化版）
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器：没开玩笑，普通程序员也能写出自己的编译器！
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面？原因和解决方案都在这啦！
前端·vue.js
拉不动的猪2 小时前
前端自做埋点，我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展：从扫雷小游戏开发再探问题分解与 AI 代码调试能力（中）
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中3 小时前
前端面经-JS篇（三）--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师4 小时前
OpenAI为何觊觎Chrome？AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06苍穹外卖面试总结07DeepSeek各版本说明与优缺点分析08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09RAG 实践- Ollama+RagFlow 部署本地知识库10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）