专业文档模板 - 设计规范

模板介绍

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

整体采用柔和的蓝白色渐变背景（#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: 移动端布局，单列布局，适当调整内边距

当前设备预览

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

桌面端布局

平板端布局

移动端布局