soilgd/前端/html/完整HTML模板设计与功能说明.css

/* 全局样式重置 */
* {
    margin: 0;
    /* 移除所有HTML元素的默认外边距，消除不同浏览器间的默认样式差异 */
    padding: 0;
    /* 移除所有HTML元素的默认内边距，确保布局起点一致 */
    box-sizing: border-box;
    /* 改变盒模型：元素的 width 和 height 包含内容(content)、内边距(padding)和边框(border)，使尺寸计算更直观、布局更可控 */
}

/* CSS变量定义 */
: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);
    /* 阴影效果 */
}

/* 页面基础样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 设置页面的默认字体族。优先使用 'Segoe UI'，若不可用则依次回退到 Tahoma, Geneva, Verdana，最后是系统默认的无衬线字体(sans-serif)。 */
    line-height: 1.6;
    /* 设置文本的行高为字体大小的1.6倍。合适的行高能提高文本的可读性和美观度，避免文字过于紧凑。 */
    color: #333;
    /* 设置页面的默认文字颜色为深灰色（#333），比纯黑色(#000)更柔和，阅读体验更好。 */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    /* 设置页面背景为一个135度角的线性渐变。从左上角(#f5f7fa，一种极浅灰蓝)平滑过渡到右下角(#c3cfe2，一种浅灰蓝)，营造出清新、现代的视觉效果。 */
    min-height: 100vh;
    /* 设置body的最小高度为视口(viewport)高度的100%。这确保了即使内容很少，页面也能填满整个浏览器窗口，避免背景色或背景图出现中断。 */
    padding: 20px;
    /* 在body元素四周设置20像素的内边距。为页面内容与浏览器窗口边缘之间提供空间，提升视觉舒适度，防止内容紧贴边缘。 */
}

/* 容器样式 - 用于内容居中 */
.container {
    max-width: 1200px;
    /* 设置容器的最大宽度为 1200 像素。当视口（viewport）宽度大于 1200px 时，容器宽度不会超过此值，防止内容在宽屏上过度拉伸影响阅读。 */
    margin: 0 auto;
    /* 设置外边距：上下为 0，左右为 auto。浏览器会自动计算并分配左右边距，使容器在其父元素内水平居中。 */
    padding: 0 20px;
    /* 设置内边距：上下为 0，左右为 20 像素。这为容器内的内容（如文本、图片）提供了左右边距，在窄屏（视口宽度小于 1200px）时，防止内容紧贴屏幕边缘，提升可读性和美观度。 */
}

/* 页头样式 */
header {
    background: var(--primary);
    /* 设置页头的背景颜色为名为 --primary 的 CSS 自定义属性（变量）所定义的值（例如，主色调） */
    color: white;
    /* 设置页头内所有元素的默认文字颜色为白色 */
    padding: 1rem 0;
    /* 设置页头的内边距：上下为 1rem，左右为 0。这会在页头顶部和底部创造空间，使其内容不紧贴边缘 */
    border-radius: 10px;
    /* 为页头添加 10px 的圆角，使其四个角变得圆润 */
    box-shadow: var(--shadow);
    /* 为页头添加阴影效果，阴影的具体样式（颜色、模糊度、偏移等）由 --shadow 变量定义 */
    margin-bottom: 2rem;
    /* 在页头下方设置 2rem 的外边距，与页面后续内容（如主体内容）保持距离 */
}

/* 页头内容布局 */
.header-content {
    display: flex;
    /* 将 .header-content 元素设置为弹性容器（flex container），使其子元素可以使用 Flexbox 布局 */
    justify-content: space-between;
    /* 将子元素沿主轴（默认是水平轴）分布：第一个子元素靠左，最后一个靠右，中间如果有多个子元素则平均分配剩余空间 */
    align-items: center;
    /* 将子元素在交叉轴（默认是垂直轴）上居中对齐。这确保了不同高度的子元素在垂直方向上视觉居中 */
}

/* Logo样式 */
.logo {
    font-size: 1.8rem;
    /* 设置Logo文字的字体大小为1.8倍于根元素（通常是html）的字体大小。例如，如果根字体大小是16px，则此处字体大小为 1.8 * 16 = 28.8px。使用rem单位确保在不同设备上能根据用户设置或响应式设计进行缩放。 */
    font-weight: bold;
    /* 设置字体粗细为粗体（等同于数值700），使Logo文字更加醒目和突出。 */
}

/* 导航菜单样式 */
nav ul {
    display: flex;
    /* 将此元素设置为弹性容器（flex container），使其子元素成为弹性项目（flex items），并启用 Flexbox 布局模式 */
    list-style: none;
    /* 移除此元素（通常用于 ul 或 ol 列表）的项目符号或编号 */
}

nav ul li {
    margin-left: 1.5rem;
    /* 给 <nav> 内 <ul> 中的每个 <li> 元素设置左边距为 1.5rem。这会在每个列表项之间创建向右的间距（第一个项左边也有 1.5rem 空白）。通常用于在水平排列的列表项间制造间隔。 */
}

nav ul li a {
    color: white;
    /* 设置链接文字的颜色为白色 */
    text-decoration: none;
    /* 去除链接默认的下划线 */
    font-weight: 500;
    /* 设置文字粗细为中等（500 是比常规 400 稍粗的字体） */
    transition: all 0.3s ease;
    /* 为链接的所有可动画属性（如颜色、背景等）添加一个 0.3 秒的平滑过渡效果（缓动函数为 ease）。当属性值改变时（如鼠标悬停），会有一个渐变动画，而不是立即切换。 */
}

nav ul li a:hover {
    color: var(--accent);
    /* 当鼠标悬停（hover）在链接上时，将文字颜色更改为名为 --accent 的 CSS 自定义属性所定义的颜色。这个颜色通常在其他地方（如 :root）被定义，例如 --accent: #007bff; */
}

/* 主内容区布局 */
main {
    display: grid;
    /* 将 main 元素设置为一个 CSS 网格容器，允许使用网格布局系统来排列其子元素 */
    grid-template-columns: 1fr 3fr;
    /* 定义两列的网格布局，第一列占据可用空间的 3/4（3fr），第二列占据 1/4（1fr），形成 3:1 的比例布局 */
    gap: 2rem;
    /* 设置网格项之间的间距为 2rem，包括行和列之间的间距 */
    margin-bottom: 2rem;
    /* 在主内容区域下方添加 2rem 的外边距，增加与其他页面元素之间的空间 */
}

/* 卡片样式 - 用于内容区块 */
.card {
    background: white;
    /* 设置卡片背景为纯白色 */
    border-radius: 10px;
    /* 为卡片添加 10px 的圆角，使边角圆润 */
    box-shadow: var(--shadow);
    /* 添加阴影效果（阴影样式由 --shadow 变量定义），增加卡片的层次感和立体感 */
    padding: 1.5rem;
    /* 为卡片内容设置 1.5rem 的内边距，使内容与边框保持距离 */
    margin-bottom: 1.5rem;
    /* 在卡片下方设置 1.5rem 的外边距，与下一个元素保持间距 */
}

.card h2 {
    color: var(--primary);
    /* 设置卡片内二级标题的颜色为 --primary 变量定义的主色调 */
    margin-bottom: 1rem;
    /* 标题下方留出 1rem 的外边距 */
    padding-bottom: 0.5rem;
    /* 标题文字下方有 0.5rem 的内边距 */
    border-bottom: 2px solid var(--accent);
    /* 在标题下方添加一条 2px 宽的实线边框，颜色为 --accent 变量定义的强调色，作为视觉分隔 */
}

/* 表格样式 */
table {
    width: 100%;
    /* 表格宽度占满其容器的 100% */
    border-collapse: collapse;
    /* 将表格的边框合并为单一的边框，消除单元格间的缝隙 */
    margin: 1rem 0;
    /* 表格上下各留出 1rem 的外边距 */
}

table th,
table td {
    padding: 0.75rem;
    /* 表格单元格（表头和数据单元格）的内边距为 0.75rem */
    text-align: left;
    /* 单元格内文本左对齐 */
    border-bottom: 1px solid #ddd;
    /* 每个单元格下方添加一条 1px 宽的浅灰色（#ddd）实线边框 */
}

table th {
    background-color: var(--primary);
    /* 表头（th）单元格的背景色为 --primary 定义的主色调 */
    color: white;
    /* 表头文字颜色为白色，确保在深色背景上清晰可读 */
}

table tr:hover {
    background-color: #f5f5f5;
    /* 当鼠标悬停在表格行（tr）上时，该行背景色变为浅灰色（#f5f5f5），提供视觉反馈 */
}

/* 表单元素样式 */
.form-group {
    margin-bottom: 1rem;
    /* 每个表单分组（通常包含 label 和 input）下方留出 1rem 的外边距，分隔不同表单项 */
}

 a {
    text-decoration: none;
    /* 每个表单分组（通常包含 label 和 input）下方留出 1rem 的外边距，分隔不同表单项 */
}

label {
    display: block;
    /* 将 label 设置为块级元素，使其独占一行 */
    margin-bottom: 0.5rem;
    /* label 文字下方留出 0.5rem 的外边距 */
    font-weight: 500;
    /* label 文字使用中等粗细（500） */
}

input,
select,
textarea {
    width: 100%;
    /* 输入框、选择框、文本域的宽度占满其父容器的 100% */
    padding: 0.75rem;
    /* 内边距为 0.75rem，提供舒适的点击和输入区域 */
    border: 1px solid #ddd;
    /* 1px 宽的浅灰色（#ddd）实线边框 */
    border-radius: 4px;
    /* 4px 的小圆角 */
    font-size: 1rem;
    /* 字体大小为 1rem */
    /* border: none; 如果需要更现代的无边框设计，可取消注释此行并注释上面的 border */
}

button {
    background: var(--primary);
    /* 按钮背景色为 --primary 定义的主色调 */
    color: white;
    /* 按钮文字颜色为白色 */
    border: none;
    /* 去除按钮默认边框 */
    padding: 0.75rem 1.5rem;
    /* 内边距：上下 0.75rem，左右 1.5rem，使按钮有一定大小 */
    border-radius: 4px;
    /* 4px 的小圆角 */
    cursor: pointer;
    /* 鼠标悬停时显示为手型光标，提示可点击 */
    font-size: 1rem;
    /* 字体大小 */
    font-weight: 500;
    /* 字体粗细 */
    transition: background 0.3s ease;
    /* 为 background 属性添加 0.3 秒的平滑过渡效果 */
}

button:hover {
    background: var(--secondary);
    /* 鼠标悬停时，按钮背景色变为 --secondary 变量定义的次要/辅助色 */
}

/* 侧边栏样式 */
.sidebar {
    background: white;
    /* 侧边栏背景设为白色 */
    border-radius: 10px;
    /* 添加10px圆角 */
    box-shadow: var(--shadow);
    /* 应用预定义的阴影效果 */
    padding: 1.5rem;
    /* 内边距1.5rem */
}

.sidebar h3 {
    color: var(--primary);
    /* 标题颜色使用主色调 */
    margin-bottom: 1rem;
    /* 标题下边距1rem */
    padding-bottom: 0.5rem;
    /* 标题下内边距0.5rem */
    border-bottom: 2px solid var(--accent);
    /* 标题下添加2px强调色边框 */
}

.sidebar ul {
    list-style: none;
    /* 移除列表项前的项目符号 */
}

.sidebar ul li {
    padding: 0.5rem 0;
    /* 列表项上下内边距0.5rem */
    border-bottom: 1px solid #eee;
    /* 列表项下添加浅灰边框 */
}

.sidebar ul li:last-child {
    border-bottom: none;
    /* 最后一个列表项去除下边框 */
}

.sidebar ul li a {
    text-decoration: none;
    /* 移除链接下划线 */
    color: #333;
    /* 链接文字颜色深灰 */
    transition: color 0.3s ease;
    /* 文字颜色变化添加0.3秒过渡效果 */
}

.sidebar ul li a:hover {
    color: var(--primary);
    /* 鼠标悬停时链接颜色变为主色调 */
}

/* 页脚样式 */
footer {
    background: var(--dark);
    /* 页脚背景使用深色变量 */
    color: white;
    /* 文字颜色白色 */
    text-align: center;
    /* 文字居中对齐 */
    padding: 2rem 0;
    /* 上下内边距2rem，左右0 */
    border-radius: 10px;
    /* 10px圆角 */
    margin-top: 2rem;
    /* 上边距2rem，与上方内容分离 */
}

/* 响应式设计 - 移动设备适配 */
@media (max-width: 768px) {
    /* 当视口宽度≤768px时应用以下样式 */

    main {
        grid-template-columns: 1fr;
        /* 主内容区改为单列布局 */
    }

    .header-content {
        flex-direction: column;
        /* 页头内容垂直排列 */
        text-align: center;
        /* 内容水平居中 */
    }

    nav ul {
        margin-top: 16px;
        /* 导航菜单下移16px */
        justify-content: center;
        /* 导航项水平居中 */
    }

    nav ul li {
        margin: 0 0.75rem;
        /* 导航项左右间距0.75rem */
    }
}

/* 实用工具类 */
.flex {
    display: flex;
    gap: 1rem;
    /* 创建弹性布局，项目间距1rem */
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    /* 创建响应式网格布局，每项最小200px，自动换行，间距1rem */
}

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

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

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

.btn {
    display: inline-block;
    /* 行内块级元素 */
    padding: 0.5rem 1rem;
    /* 内边距 */
    background: var(--primary);
    /* 背景为主色调 */
    color: white;
    /* 白色文字 */
    text-decoration: none;
    /* 无下划线 */
    border-radius: 4px;
    /* 4px圆角 */
    transition: background 0.3s ease;
    /* 背景颜色变化0.3秒过渡 */
}

.btn:hover {
    background: var(--secondary);
    /* 悬停时背景为辅助色 */
}

/* 按钮状态变体 */
.btn-success {
    background: var(--success);
    /* 成功状态按钮 */
}

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

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

/* 警告框样式 */
.alert {
    padding: 1rem;
    /* 内边距1rem */
    border-radius: 4px;
    /* 4px圆角 */
    margin-bottom: 1rem;
    /* 下边距1rem */
}

.alert-success {
    background: #d4edda;
    /* 成功提示背景色 */
    color: #155724;
    /* 成功提示文字颜色 */
}

.alert-info {
    background: #d1ecf1;
    /* 信息提示背景色 */
    color: #0c5460;
    /* 信息提示文字颜色 */
}

.alert-warning {
    background: #fff3cd;
    /* 警告提示背景色 */
    color: #856404;
    /* 警告提示文字颜色 */
}

.alert-danger {
    background: #f8d7da;
    /* 危险提示背景色 */
    color: #721c24;
    /* 危险提示文字颜色 */

}