js+css实现可编辑的家庭族谱编辑器设计器代码-html代码-BFW代码库

js+css实现可编辑的家庭族谱编辑器设计器代码

代码语言：html

所属分类：其他

代码描述：js+css实现可编辑的家庭族谱编辑器设计器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可编辑家庭族谱图</title>
    <style>
        /* 全局基础样式 */
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
        body { background-color: #f4f6f9; color: #333; overflow: hidden; }
        
        /* 顶部标题栏 */
        .header { background: #2c3e50; color: white; padding: 15px 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 10; }
        .header h1 { font-size: 24px; letter-spacing: 2px; font-weight: 500; }
        .header p { font-size: 14px; color: #bdc3c7; margin-top: 5px; }

        /* 族谱容器（支持拖拽/滚动） */
        .tree-container { width: 100vw; height: calc(100vh - 80px); overflow: auto; padding: 50px; text-align: center; }

        /* --- 核心：树状结构连线 CSS --- */
        .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; display: flex; justify-content: center; }
        .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; }
        
        /* 画连接线 */
        .tree li::before, .tree li::after {
            content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #95a5a6; width: 50%; height: 20px;
        }
        .tree li::after { right: auto; left: 50%; border-left: 2px solid #95a5a6; }
        /* 清除唯一的子节点或首尾.........完整代码请登录后点击上方下载按钮下载查看