# 专业文档网页模板

基于现代设计规范的响应式文档模板，采用柔和的蓝白色渐变背景和卡片式布局，提供优秀的阅读和开发体验。

## 模板介绍

这是一个专业文档类网页模板，完全遵循以下设计规范：

- 整体采用柔和的蓝白色渐变背景（#f5f7fa 到 #c3cfe2）
- 使用卡片式布局，卡片有圆角、阴影和悬停上浮效果
- 标题采用#2c3e50到#3498db的蓝色系，有清晰的层级关系
- 代码块使用深色背景（#2c3e50）和等宽字体
- 包含响应式侧边栏和主内容区布局
- 集成常用UI组件：按钮、警告框、徽章、导航菜单
- 所有交互都有平滑的过渡效果
- 移动端适配：单列布局，适当调整内边距

### 设计特点演示

将鼠标悬停在卡片上体验上浮效果，或尝试调整浏览器窗口大小查看响应式布局变化。

## UI 组件展示

本模板内置了一系列常用UI组件，所有组件都遵循统一的设计语言。

### 警告框组件

成功提示： 操作已成功完成。
警告提示： 此操作可能带来风险。
错误提示： 操作过程中发生了错误。
信息提示： 这是一条普通信息提示。

### 徽章组件

徽章用于显示状态、分类或计数：

主要徽章 成功徽章 警告徽章 危险徽章 计数 12 新功能

## 代码示例

以下展示了代码块的设计样式，支持多种编程语言语法高亮。

### HTML结构示例

index.html
`<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>专业文档模板</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <aside class="sidebar"> <!-- 侧边栏内容 --> </aside> <main class="main-content"> <!-- 主内容区域 --> <div class="card"> <h2>卡片标题</h2> <p>卡片内容描述</p> </div> </main> </div> </body> </html>`

### CSS样式示例

styles.css
`/* 卡片设计 */ .card { background-color: #ffffff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); padding: 30px; margin-bottom: 30px; transition: all 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } /* 响应式设计 */ @media (max-width: 768px) { .container { flex-direction: column; padding: 15px; } .card { padding: 20px; } }`

### JavaScript交互示例

script.js
`// 复制代码功能 document.querySelectorAll('.copy-btn').forEach(button => { button.addEventListener('click', function() { const code = this.parentElement.nextElementSibling.textContent; navigator.clipboard.writeText(code); // 提示用户 const originalText = this.textContent; this.textContent = '已复制!'; setTimeout(() => { this.textContent = originalText; }, 2000); }); }); // 侧边栏导航激活状态 document.querySelectorAll('.nav-menu a').forEach(link => { link.addEventListener('click', function(e) { document.querySelectorAll('.nav-menu a').forEach(item => { item.classList.remove('active'); }); this.classList.add('active'); }); });`

## 响应式布局

本模板采用移动优先的响应式设计，在不同设备上都能提供优秀的用户体验。

### 响应式断点

模板定义了以下响应式断点：

- ≥1024px: 桌面布局，侧边栏+主内容并排
- 768px-1023px: 平板布局，侧边栏与主内容垂直排列
- ≤767px: 移动端布局，单列布局，适当调整内边距

### 当前设备预览

尝试调整浏览器窗口大小，观察布局变化：

桌面端布局

平板端布局

移动端布局