|
|
@@ -14,640 +14,7 @@
|
|
|
<title>HTML综合学习文档</title>
|
|
|
<!-- 引入Font Awesome图标库 -->
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
- <style>
|
|
|
- /* 全局样式重置 */
|
|
|
- /* 目的：消除不同浏览器对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 如何，现在每行只显示一个网格项 */
|
|
|
- /* 这确保了在非常窄的屏幕上，网格项能完整显示且易于点击 */
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <link rel="stylesheet" href="完整HTML模板设计.css">
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
@@ -688,7 +55,7 @@
|
|
|
<h3><i class="fas fa-star"></i> HTML5特性</h3>
|
|
|
<ul class="sidebar-links">
|
|
|
<li><a href="#html5-tags"><i class="fas fa-tags"></i> 语义化标签</a></li>
|
|
|
- <li><a href="#html5-media"><i class="fas fa-play-circle"></i> 音视频</a></li>
|
|
|
+ <li><a href="#multimedia"><i class="fas fa-play-circle"></i> 音视频</a></li>
|
|
|
<li><a href="#html5-apis"><i class="fas fa-cogs"></i> 新API</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -810,11 +177,11 @@
|
|
|
</div>
|
|
|
</section>
|
|
|
<!-- 多媒体标签部分 -->
|
|
|
- <section id="multimedia" class="section-card">
|
|
|
+ <section class="section-card">
|
|
|
<h2><i class="fas fa-image"></i> 多媒体标签</h2>
|
|
|
<!-- 图像标签说明与示例 -->
|
|
|
<h3>图像标签 <img></h3>
|
|
|
- <div class="flex">
|
|
|
+ <div class="flex" id="multimedia">
|
|
|
<div style="flex: 1;">
|
|
|
<h4>图像属性：</h4>
|
|
|
<ul>
|
