qw
/
soilgd


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
							 /* 全局样式重置 */
        /* 目的：消除不同浏览器对HTML元素的默认样式（如margin, padding）差异，确保页面在各种浏览器下有一致的基础外观 */
        /* 作用于所有元素 (*) */
        * {
            margin: 0;
            /* 移除所有元素的外边距 */
            padding: 0;
            /* 移除所有元素的内边距 */
            box-sizing: border-box;
            /* 改变盒模型：元素的width和height包含border和padding，便于布局计算 */
        }

        /* CSS 变量定义 (Custom Properties) */
        /* 目的：创建可重用的值，方便进行主题切换（如亮色/暗色模式）和统一管理颜色、阴影、圆角等设计属性 */
        /* :root 伪类选择器代表文档的根元素（通常是 <html>），在这里定义的变量可在整个文档中使用 */
        :root {
            --primary: #4361ee;
            /* 主色调，通常用于主要按钮、链接、高亮区域 */
            --secondary: #3f37c9;
            /* 次要色调，用于次要按钮或作为主色调的补充 */
            --accent: #4cc9f0;
            /* 强调色，用于需要突出显示的元素 */
            --light: #f8f9fa;
            /* 浅色，常用于背景或浅色文本 */
            --dark: #212529;
            /* 深色，常用于深色文本或深色背景 */
            --success: #4CAF50;
            /* 成功/正确状态的颜色 */
            --warning: #ff9800;
            /* 警告/注意状态的颜色 */
            --danger: #f44336;
            /* 危险/错误状态的颜色 */
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 预定义的阴影效果，增加元素层次感 */
            --border-radius: 8px;
            /* 预定义的边框圆角大小，用于创建圆角卡片、按钮等 */
            --transition: all 0.3s ease;
            /* 预定义的过渡动画，使属性变化更平滑 */
            --text-light: #f8f9fa;
            /* 浅色文本颜色 */
            --text-dark: #212529;
            /* 深色文本颜色 */
            --bg: #f5f7fa;
            /* 页面默认背景色 */
            --card-bg: #ffffff;
            /* 卡片（Card）组件的背景色 */
            --header-bg: #4361ee;
            /* 页头（Header）的背景色 */
            --sidebar-bg: #f0f2f5;
            /* 侧边栏（Sidebar）的背景色 */
        }

        /* 暗色主题变量覆盖 */
        /* 目的：当 body 或根元素被添加 'dark-theme' 类时，覆盖 :root 中定义的某些变量值，实现暗色主题 */
        /* 通常通过JavaScript动态切换此class来实现主题切换 */
        .dark-theme {
            --bg: #1a1a2e;
            /* 暗色背景 */
            --card-bg: #16213e;
            /* 暗色卡片背景 */
            --text-dark: #f0f0f0;
            /* 暗色主题下使用浅色文本 */
            --header-bg: #0f3460;
            /* 暗色页头背景 */
            --sidebar-bg: #1a1a2e;
            /* 暗色侧边栏背景 */
        }

        /* 页面基础布局样式 */
        /* 目的：使用 CSS Grid 布局模型构建整个页面的响应式结构 */
        /* 采用网格布局，定义了明确的区域划分 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 定义字体栈 */
            line-height: 1.6;
            /* 定义行高，改善文本可读性 */
            color: var(--text-dark);
            /* 设置默认文本颜色，使用CSS变量 */
            background-color: var(--bg);
            /* 设置页面背景色，使用CSS变量 */
            min-height: 100vh;
            /* 最小高度为视口高度的100%，确保内容少时也能撑满屏幕 */
            display: grid;
            /* 启用 CSS Grid 布局 */
            /* 定义网格的列：第一列固定280px（通常用于侧边栏），第二列占据剩余所有空间(1fr) */
            grid-template-columns: 280px 1fr;
            /* 定义网格的行：第一行固定70px（页头），第二行占据剩余空间(1fr)（主要内容区），第三行固定50px（页脚） */
            grid-template-rows: 70px 1fr 50px;
            /* 定义网格区域的名称和布局：
       "header header"  -> 页头跨越两列
       "sidebar main"   -> 第一列是侧边栏，第二列是主内容区
       "footer footer"  -> 页脚跨越两列
       这些名称（header, sidebar, main, footer）将被 grid-area 属性引用 */
            grid-template-areas:
                "header header"
                "sidebar main"
                "footer footer";
            /* 为 body 元素本身应用过渡效果，当切换主题（如添加/移除 dark-theme class）时，颜色等属性会平滑变化 */
            transition: var(--transition);
        }

        /* 页头 (Header) 样式 */
        /* 使用 grid-area: header; 将此元素放置在由 grid-template-areas 定义的 'header' 区域 */
        header {
            grid-area: header;
            /* 将此元素放置在名为 'header' 的网格区域内 */
            background: var(--header-bg);
            /* 背景色使用CSS变量 */
            color: var(--text-light);
            /* 文本颜色使用CSS变量 */
            padding: 0 2rem;
            /* 左右内边距为2rem，上下为0 */
            display: flex;
            /* 使用 Flexbox 布局来排列页头内部元素 */
            justify-content: space-between;
            /* 子元素在主轴（水平）上分散对齐，第一个靠左，最后一个靠右 */
            align-items: center;
            /* 子元素在交叉轴（垂直）上居中对齐 */
            box-shadow: var(--shadow);
            /* 添加预定义的阴影效果 */
            z-index: 100;
            /* 设置较高的堆叠顺序，确保页头在其他内容之上（尤其在滚动时） */
        }

        /* logo 样式 */
        /* 专门针对页头内的logo元素（通常是一个类名为logo的元素） */
        .logo {
            font-size: 1.8rem;
            /* 设置logo文字大小 */
            font-weight: bold;
            /* 设置logo文字加粗 */
            display: flex;
            /* 使用 Flexbox 布局，方便图标和文字并排 */
            align-items: center;
            /* 内部元素（如图标和文字）垂直居中 */
            gap: 10px;
            /* 定义logo内部子元素之间的间距为10px */
            /* 例如，如果logo包含一个图标和一个文字，这个gap会让它们之间有10px的空隙 */
        }

        /* 主题切换按钮样式 */
        /* 定义一个用于切换亮色/暗色主题的按钮的外观 */
        .theme-toggle {
            background: var(--accent);
            /* 背景色使用CSS变量 --accent (强调色) */
            color: var(--text-dark);
            /* 文本颜色使用CSS变量 --text-dark (深色文本) */
            border: none;
            /* 移除默认边框 */
            padding: 8px 15px;
            /* 设置上下8px，左右15px的内边距 */
            border-radius: 20px;
            /* 设置20px的圆角，使按钮呈胶囊或圆形 */
            cursor: pointer;
            /* 鼠标悬停时显示为手型光标，表示可点击 */
            font-weight: 500;
            /* 字体粗细设置为中等偏粗 */
            display: flex;
            /* 使用Flexbox布局，便于内部元素（如图标和文字）对齐 */
            align-items: center;
            /* 内部元素在交叉轴（垂直方向）上居中对齐 */
            gap: 8px;
            /* 内部子元素之间保持8px的间距 */
            transition: var(--transition);
            /* 应用预设的过渡效果，使背景色等属性变化更平滑 */
        }

        /* 主题切换按钮悬停状态 */
        /* 当鼠标悬停在按钮上时的样式 */
        .theme-toggle:hover {
            background: #3fb8da;
            /* 背景色变为一个特定的蓝色（比--accent稍深），提供视觉反馈 */
            /* 注意：这里没有使用变量，而是固定值，可能为了提供更具体的悬停效果 */
        }

        /* 侧边栏样式 */
        /* 定义页面左侧边栏（通常用于导航）的整体样式 */
        aside {
            grid-area: sidebar;
            /* 将此元素放置在CSS Grid布局中名为'sidebar'的区域 */
            background: var(--sidebar-bg);
            /* 背景色使用CSS变量 --sidebar-bg */
            padding: 20px;
            /* 设置20px的内边距 */
            overflow-y: auto;
            /* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            /* 右侧添加1px宽的浅色（透明度10%）实线边框，作为与主内容区的分隔 */
        }

        /* 侧边栏内的一个分组区域 */
        /* 用于将侧边栏内容分组，例如“导航”、“工具”等 */
        .sidebar-section {
            margin-bottom: 25px;
            /* 每个分组下方留出25px的外边距，增加分组间的空间 */
        }

        /* 侧边栏分组标题样式 */
        .sidebar-section h3 {
            color: var(--primary);
            /* 标题文字颜色使用主色调 --primary */
            margin-bottom: 15px;
            /* 标题下方留出15px外边距 */
            padding-bottom: 8px;
            /* 标题下方填充8px */
            border-bottom: 2px solid var(--accent);
            /* 在标题下方添加2px宽的强调色实线，增强视觉层次 */
        }

        /* 侧边栏链接列表样式 */
        /* 定义导航链接列表的通用样式 */
        .sidebar-links {
            list-style: none;
            /* 移除列表项前的默认符号（如圆点） */
        }

        /* 侧边栏列表项样式 */
        .sidebar-links li {
            margin-bottom: 8px;
            /* 每个列表项下方留出8px外边距 */
        }

        /* 侧边栏链接样式 */
        .sidebar-links a {
            text-decoration: none;
            /* 移除链接的下划线 */
            color: var(--text-dark);
            /* 链接文字颜色使用深色文本 --text-dark */
            display: block;
            /* 使链接显示为块级元素，占据整行宽度，增加可点击区域 */
            padding: 8px 12px;
            /* 设置上下8px，左右12px的内边距 */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 --border-radius */
            transition: var(--transition);
            /* 应用过渡效果，使悬停时的变化更平滑 */
        }

        /* 侧边栏链接悬停状态 */
        .sidebar-links a:hover {
            background: var(--primary);
            /* 悬停时，背景色变为主色调 --primary */
            color: white;
            /* 悬停时，文字颜色变为白色，提高对比度 */
        }

        /* 侧边栏链接中的图标样式 */
        /* 假设链接中包含使用图标字体（如Font Awesome）的 <i> 标签 */
        .sidebar-links a i {
            width: 25px;
            /* 为图标设置固定的25px宽度 */
            text-align: center;
            /* 确保图标在设定的宽度内水平居中 */
            /* 这使得所有图标对齐整齐，改善视觉效果 */
        }

        /* 主内容区样式 */
        /* 定义页面中央主要区域的样式 */
        main {
            grid-area: main;
            /* 将此元素放置在CSS Grid布局中名为'main'的区域 */
            padding: 2rem;
            /* 设置2rem的内边距 */
            overflow-y: auto;
            /* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
        }

        /* 内容卡片样式 */
        /* 定义页面中用于包裹独立内容块（如表单、信息展示区）的卡片容器样式 */
        .section-card {
            background: var(--card-bg);
            /* 背景色使用卡片背景色 --card-bg */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 --border-radius */
            box-shadow: var(--shadow);
            /* 添加预设的阴影效果 --shadow，增加立体感和层次 */
            padding: 1.8rem;
            /* 设置1.8rem的内边距 */
            margin-bottom: 2rem;
            /* 卡片下方留出2rem的外边距，使卡片之间有足够间隔 */
            transition: var(--transition);
            /* 应用过渡效果，例如在主题切换时颜色变化更平滑 */
        }

        /* 卡片内一级标题样式 */
        .section-card h2 {
            color: var(--primary);
            /* 标题文字颜色使用主色调 --primary */
            margin-bottom: 1.5rem;
            /* 标题下方留出1.5rem外边距 */
            padding-bottom: 0.8rem;
            /* 标题下方填充0.8rem */
            border-bottom: 2px solid var(--accent);
            /* 在标题下方添加2px宽的强调色实线 */
            display: flex;
            /* 使用Flexbox布局 */
            align-items: center;
            /* 内部元素（如图标和文字）在交叉轴（垂直方向）上居中对齐 */
            gap: 10px;
            /* 内部子元素（如图标和文字）之间保持10px的间距 */
        }

        /* 卡片内二级标题样式 */
        .section-card h3 {
            color: var(--secondary);
            /* 标题文字颜色使用次要色调 --secondary */
            margin: 1.2rem 0 0.8rem;
            /* 设置上外边距1.2rem，左右外边距0，下外边距0.8rem */
        }

        /* 表格样式 */
        /* 定义表格的整体外观和布局 */
        table {
            width: 100%;
            /* 表格宽度占满其父容器 */
            border-collapse: collapse;
            /* 合并表格边框，使相邻单元格的边框合并为一条线 */
            margin: 1.2rem 0;
            /* 上下外边距为1.2rem，左右为0 */
            background: var(--card-bg);
            /* 背景色使用卡片背景色变量 */
            box-shadow: var(--shadow);
            /* 添加预设的阴影效果，增加立体感 */
            border-radius: var(--border-radius);
            /* 设置圆角，使表格边缘更柔和 */
            overflow: hidden;
            /* 隐藏溢出的内容，确保圆角和阴影效果在边框内显示 */
        }

        /* 表格表头和表格数据单元格的通用样式 */
        table th,
        table td {
            padding: 0.9rem;
            /* 单元格内边距为0.9rem */
            text-align: left;
            /* 文本左对齐 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            /* 每个单元格下方添加一条浅色（透明度10%）细线分隔 */
        }

        /* 表格表头样式 */
        table th {
            background-color: var(--primary);
            /* 表头背景色使用主色调 */
            color: white;
            /* 表头文字颜色为白色，提高对比度 */
        }

        /* 表格行悬停状态样式 */
        table tr:hover {
            background-color: rgba(0, 0, 0, 0.03);
            /* 当鼠标悬停在行上时，背景色变为非常浅的灰色（透明度3%） */
        }

        /* 表单样式 */
        /* 表单控件分组容器，用于管理标签和输入框的间距 */
        .form-group {
            margin-bottom: 1.2rem;
            /* 每个表单组下方留出1.2rem的外边距 */
        }

        /* 表单标签样式 */
        label {
            display: block;
            /* 显示为块级元素，独占一行 */
            margin-bottom: 0.5rem;
            /* 标签下方留出0.5rem的外边距 */
            font-weight: 500;
            /* 字体加粗 */
        }

        /* 输入框、选择框、文本域的通用样式 */
        input,
        select,
        textarea {
            width: 100%;
            /* 宽度占满其父容器 */
            padding: 0.8rem;
            /* 内边距为0.8rem */
            border: 1px solid #ddd;
            /* 1px宽的浅灰色边框 */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 */
            font-size: 1rem;
            /* 字体大小 */
            background: var(--card-bg);
            /* 背景色使用卡片背景色 */
            color: var(--text-dark);
            /* 文字颜色使用深色文本变量 */
            transition: var(--transition);
            /* 应用过渡效果，使获得焦点时的变化更平滑 */
        }

        /* 输入框、选择框、文本域获得焦点时的样式 */
        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--accent);
            /* 边框颜色变为强调色 */
            outline: none;
            /* 移除浏览器默认的轮廓线 */
            box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.3);
            /* 在边框外添加一层半透明的蓝色（--accent色）光晕（3px宽） */
        }

        /* 按钮通用样式 */
        button,
        .btn {
            background: var(--primary);
            /* 背景色使用主色调 */
            color: white;
            /* 文字颜色为白色 */
            border: none;
            /* 移除默认边框 */
            padding: 0.8rem 1.5rem;
            /* 上下内边距0.8rem，左右1.5rem */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 */
            cursor: pointer;
            /* 鼠标悬停时显示为手型光标 */
            font-size: 1rem;
            /* 字体大小 */
            font-weight: 500;
            /* 字体加粗 */
            transition: var(--transition);
            /* 应用过渡效果 */
            display: inline-flex;
            /* 显示为行内Flexbox容器，便于图标和文字对齐 */
            align-items: center;
            /* 内部元素（如图标）垂直居中对齐 */
            gap: 8px;
            /* 内部子元素（如图标和文字）之间保持8px间距 */
        }

        /* 按钮悬停状态样式 */
        button:hover,
        .btn:hover {
            background: var(--secondary);
            /* 悬停时背景色变为次要色调 */
            transform: translateY(-2px);
            /* 向上轻微移动2px，模拟“按下”效果，增强交互感 */
        }

        /* 特定功能按钮样式 */
        .btn-success {
            /* 成功/确认按钮 */
            background: var(--success);
        }

        .btn-warning {
            /* 警告/注意按钮 */
            background: var(--warning);
        }

        .btn-danger {
            /* 危险/删除按钮 */
            background: var(--danger);
        }

        /* 列表样式 */
        /* 无序列表和有序列表的通用样式 */
        ul,
        ol {
            margin-left: 1.8rem;
            /* 左侧外边距1.8rem，形成缩进 */
            margin-bottom: 1.2rem;
            /* 下方外边距1.2rem */
        }

        /* 列表项样式 */
        li {
            margin-bottom: 0.5rem;
            /* 每个列表项下方留出0.5rem外边距 */
        }

        /* 页脚样式 */
        footer {
            grid-area: footer;
            /* 将此元素放置在CSS Grid布局中名为'footer'的区域 */
            background: var(--dark);
            /* 背景色使用深色变量 */
            color: var(--text-light);
            /* 文字颜色使用浅色文本变量 */
            text-align: center;
            /* 文本居中对齐 */
            padding: 1rem;
            /* 内边距1rem */
            display: flex;
            /* 使用Flexbox布局 */
            justify-content: center;
            /* 内容在主轴（水平）上居中对齐 */
            align-items: center;
            /* 内容在交叉轴（垂直）上居中对齐 */
        }

        /* 实用工具类 (Utility Classes) */
        /* 提供快速布局和样式的辅助类 */

        .flex {
            display: flex;
            /* 快速应用Flexbox布局 */
            gap: 1rem;
            /* 子元素间默认间距1rem */
            flex-wrap: wrap;
            /* 允许子元素换行 */
        }

        .grid {
            display: grid;
            /* 快速应用Grid布局 */
            /* 创建一个响应式网格：自动填充列，每列最小250px，最大1fr（均分剩余空间） */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            /* 网格项之间的间距1.5rem */
        }

        .text-center {
            text-align: center;
            /* 文本居中对齐 */
        }

        .mt-2 {
            margin-top: 2rem;
            /* 上外边距2rem */
        }

        .mb-2 {
            margin-bottom: 2rem;
            /* 下外边距2rem */
        }

        .p-3 {
            padding: 1.5rem;
            /* 内边距1.5rem */
        }

        /* 示例框样式 - 用于突出显示示例内容 */
        .example-box {
            background: rgba(67, 97, 238, 0.1);
            /* 非常浅的蓝色背景（透明度10%） */
            border-left: 4px solid var(--primary);
            /* 左侧添加4px宽的主色调实线，作为视觉引导 */
            padding: 1.2rem;
            /* 内边距1.2rem */
            margin: 1.2rem 0;
            /* 上下外边距1.2rem */
            /* 设置圆角：左上角0度，其他三个角使用预设圆角，形成特殊视觉效果 */
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        /* 代码块样式 - 用于展示代码片段 */
        .code-block {
            background: #2d2d2d;
            /* 深灰色背景，模拟代码编辑器 */
            color: #f8f8f2;
            /* 浅色文字，提高可读性 */
            padding: 1.2rem;
            /* 内边距1.2rem */
            border-radius: var(--border-radius);
            /* 应用圆角 */
            margin: 1.2rem 0;
            /* 上下外边距1.2rem */
            overflow: auto;
            /* 内容溢出时允许滚动（特别是水平滚动） */
            font-family: 'Courier New', monospace;
            /* 使用等宽字体，适合代码显示 */
        }

        /* 标签示例样式 - 可能用于展示HTML标签或分类标签 */
        .tag-example {
            background: var(--light);
            /* 背景色使用浅色变量 */
            padding: 15px;
            /* 内边距15px */
            border-radius: var(--border-radius);
            /* 应用圆角 */
            margin: 15px 0;
            /* 上下外边距15px */
        }

        /* 响应式设计：小屏幕下布局调整 */
        /* 使用媒体查询，当屏幕宽度小于或等于 900px 时应用以下规则 */
        @media (max-width: 900px) {

            /* 调整整体页面布局 */
            body {
                /* 将网格布局的列数从多列（可能包含侧边栏）改为单列 */
                grid-template-columns: 1fr;
                /* 重新定义网格区域的排列顺序，使内容垂直堆叠 */
                grid-template-areas:
                    "header"
                    /* 顶部导航栏 */
                    "main"
                    /* 主内容区域（现在占据整个宽度） */
                    "footer";
                /* 页脚 */
                /* 注意：'sidebar' 区域在此布局中被移除 */
            }

            /* 隐藏侧边栏 */
            aside {
                display: none;
                /* 将侧边栏完全隐藏，不占用任何空间 */
            }

            /* 显示移动端菜单按钮 */
            .mobile-menu-btn {
                display: block;
                /* 将原本可能隐藏的移动端菜单按钮显示出来 */
                /* 这个按钮通常用于在小屏幕上点击以展开/收起侧边栏（如果实现的话） */
            }
        }

        /* 进一步适配更小的屏幕（如手机竖屏） */
        /* 当屏幕宽度小于或等于 600px 时应用以下规则 */
        @media (max-width: 600px) {

            /* 调整 Flex 布局容器的方向 */
            .flex {
                flex-direction: column;
                /* 将 Flex 容器的主轴方向改为垂直（从上到下） */
                /* 这使得原本水平排列的子元素在小屏幕上垂直堆叠，避免内容过窄或换行混乱 */
            }

            /* 调整 Grid 布局容器的列数 */
            .grid {
                /* 将网格布局强制变为单列 */
                grid-template-columns: 1fr;
                /* 无论之前定义的 minmax 如何，现在每行只显示一个网格项 */
                /* 这确保了在非常窄的屏幕上，网格项能完整显示且易于点击 */
            }
        }