update: 2026-03-28 20:59
This commit is contained in:
834
InfoGenie-frontend/public/toolbox/学习工具/文档类网页模板/index.html
Normal file
834
InfoGenie-frontend/public/toolbox/学习工具/文档类网页模板/index.html
Normal file
@@ -0,0 +1,834 @@
|
||||
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-dark: #2c3e50;
|
||||
--primary-blue: #3498db;
|
||||
--primary-light: #f5f7fa;
|
||||
--secondary-light: #c3cfe2;
|
||||
--card-bg: #ffffff;
|
||||
--code-bg: #2c3e50;
|
||||
--success: #2ecc71;
|
||||
--warning: #f39c12;
|
||||
--danger: #e74c3c;
|
||||
--info: #3498db;
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--border-radius: 10px;
|
||||
--shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
--shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
/* 侧边栏样式 */
|
||||
.sidebar {
|
||||
flex: 0 0 280px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 25px;
|
||||
height: fit-content;
|
||||
transition: var(--transition);
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid var(--primary-blue);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
display: block;
|
||||
padding: 12px 15px;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
transition: var(--transition);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-menu a:hover, .nav-menu a.active {
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.nav-menu a i {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 主内容区样式 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 页眉样式 */
|
||||
header {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-area h1 {
|
||||
background: linear-gradient(90deg, var(--primary-dark), var(--primary-blue));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title-area p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid rgba(52, 152, 219, 0.3);
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: var(--primary-blue);
|
||||
margin: 20px 0 10px;
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 代码块样式 */
|
||||
.code-block {
|
||||
background-color: var(--code-bg);
|
||||
color: #ecf0f1;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 0.95rem;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
color: #bdc3c7;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #bdc3c7;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* UI组件样式 */
|
||||
.demo-area {
|
||||
background-color: rgba(245, 247, 250, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--primary-blue);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--primary-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
border-left: 5px solid;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: rgba(46, 204, 113, 0.1);
|
||||
border-left-color: var(--success);
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: rgba(243, 156, 18, 0.1);
|
||||
border-left-color: var(--warning);
|
||||
color: #d35400;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
border-left-color: var(--danger);
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
border-left-color: var(--primary-blue);
|
||||
color: #2980b9;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: rgba(52, 152, 219, 0.15);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: rgba(46, 204, 113, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: rgba(243, 156, 18, 0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: rgba(231, 76, 60, 0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
footer {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 30px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--primary-blue);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 1;
|
||||
position: static;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
header, .card, footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.title-area h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title-area h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 18px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 辅助类 */
|
||||
.highlight {
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
color: var(--primary-blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
margin: 25px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<h3><i class="fas fa-book"></i> 文档导航</h3>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#introduction" class="active"><i class="fas fa-home"></i> 介绍</a></li>
|
||||
<li><a href="#getting-started"><i class="fas fa-rocket"></i> 快速开始</a></li>
|
||||
<li><a href="#components"><i class="fas fa-cube"></i> UI 组件</a></li>
|
||||
<li><a href="#layout"><i class="fas fa-th-large"></i> 布局系统</a></li>
|
||||
<li><a href="#customization"><i class="fas fa-palette"></i> 自定义</a></li>
|
||||
<li><a href="#examples"><i class="fas fa-code"></i> 代码示例</a></li>
|
||||
</ul>
|
||||
|
||||
<h3><i class="fas fa-tags"></i> 标签分类</h3>
|
||||
<div class="badge-container">
|
||||
<span class="badge badge-primary">HTML</span>
|
||||
<span class="badge badge-success">CSS</span>
|
||||
<span class="badge badge-warning">JavaScript</span>
|
||||
<span class="badge badge-danger">响应式</span>
|
||||
<span class="badge badge-primary">设计规范</span>
|
||||
<span class="badge badge-success">组件</span>
|
||||
<span class="badge badge-warning">模板</span>
|
||||
<span class="badge badge-danger">文档</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 标题区 -->
|
||||
<header class="title-area">
|
||||
<h1>专业文档网页模板</h1>
|
||||
<p>基于现代设计规范的响应式文档模板，采用柔和的蓝白色渐变背景和卡片式布局，提供优秀的阅读和开发体验。</p>
|
||||
</header>
|
||||
|
||||
<!-- 卡片1: 介绍 -->
|
||||
<section id="introduction" class="card">
|
||||
<h2><i class="fas fa-info-circle"></i> 模板介绍</h2>
|
||||
<p>这是一个专业文档类网页模板，完全遵循以下设计规范：</p>
|
||||
<ul>
|
||||
<li>整体采用柔和的蓝白色渐变背景（<span class="highlight">#f5f7fa</span> 到 <span class="highlight">#c3cfe2</span>）</li>
|
||||
<li>使用卡片式布局，卡片有圆角、阴影和悬停上浮效果</li>
|
||||
<li>标题采用<span class="highlight">#2c3e50</span>到<span class="highlight">#3498db</span>的蓝色系，有清晰的层级关系</li>
|
||||
<li>代码块使用深色背景（<span class="highlight">#2c3e50</span>）和等宽字体</li>
|
||||
<li>包含响应式侧边栏和主内容区布局</li>
|
||||
<li>集成常用UI组件：按钮、警告框、徽章、导航菜单</li>
|
||||
<li>所有交互都有平滑的过渡效果</li>
|
||||
<li>移动端适配：单列布局，适当调整内边距</li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-area">
|
||||
<h3>设计特点演示</h3>
|
||||
<p>将鼠标悬停在卡片上体验上浮效果，或尝试调整浏览器窗口大小查看响应式布局变化。</p>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary">主要按钮</button>
|
||||
<button class="btn btn-success">成功按钮</button>
|
||||
<button class="btn btn-warning">警告按钮</button>
|
||||
<button class="btn btn-danger">危险按钮</button>
|
||||
<button class="btn btn-outline">轮廓按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 卡片2: UI组件 -->
|
||||
<section id="components" class="card">
|
||||
<h2><i class="fas fa-cubes"></i> UI 组件展示</h2>
|
||||
<p>本模板内置了一系列常用UI组件，所有组件都遵循统一的设计语言。</p>
|
||||
|
||||
<h3>警告框组件</h3>
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-check-circle"></i> <strong>成功提示：</strong> 操作已成功完成。
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i> <strong>警告提示：</strong> 此操作可能带来风险。
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-times-circle"></i> <strong>错误提示：</strong> 操作过程中发生了错误。
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle"></i> <strong>信息提示：</strong> 这是一条普通信息提示。
|
||||
</div>
|
||||
|
||||
<h3>徽章组件</h3>
|
||||
<p>徽章用于显示状态、分类或计数：</p>
|
||||
<div class="badge-container">
|
||||
<span class="badge badge-primary">主要徽章</span>
|
||||
<span class="badge badge-success">成功徽章</span>
|
||||
<span class="badge badge-warning">警告徽章</span>
|
||||
<span class="badge badge-danger">危险徽章</span>
|
||||
<span class="badge badge-primary">计数 <span class="highlight">12</span></span>
|
||||
<span class="badge badge-success">新功能</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 卡片3: 代码示例 -->
|
||||
<section id="examples" class="card">
|
||||
<h2><i class="fas fa-code"></i> 代码示例</h2>
|
||||
<p>以下展示了代码块的设计样式，支持多种编程语言语法高亮。</p>
|
||||
|
||||
<h3>HTML结构示例</h3>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>index.html</span>
|
||||
<button class="copy-btn">复制代码</button>
|
||||
</div>
|
||||
<code>
|
||||
<!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>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h3>CSS样式示例</h3>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>styles.css</span>
|
||||
<button class="copy-btn">复制代码</button>
|
||||
</div>
|
||||
<code>
|
||||
/* 卡片设计 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h3>JavaScript交互示例</h3>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>script.js</span>
|
||||
<button class="copy-btn">复制代码</button>
|
||||
</div>
|
||||
<code>
|
||||
// 复制代码功能
|
||||
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');
|
||||
});
|
||||
});
|
||||
</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 卡片4: 响应式布局 -->
|
||||
<section id="layout" class="card">
|
||||
<h2><i class="fas fa-mobile-alt"></i> 响应式布局</h2>
|
||||
<p>本模板采用移动优先的响应式设计，在不同设备上都能提供优秀的用户体验。</p>
|
||||
|
||||
<div class="demo-area">
|
||||
<h3>响应式断点</h3>
|
||||
<p>模板定义了以下响应式断点：</p>
|
||||
<ul>
|
||||
<li><span class="highlight">≥1024px</span>: 桌面布局，侧边栏+主内容并排</li>
|
||||
<li><span class="highlight">768px-1023px</span>: 平板布局，侧边栏与主内容垂直排列</li>
|
||||
<li><span class="highlight">≤767px</span>: 移动端布局，单列布局，适当调整内边距</li>
|
||||
</ul>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<h3>当前设备预览</h3>
|
||||
<p>尝试调整浏览器窗口大小，观察布局变化：</p>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
|
||||
<div style="flex: 1; min-width: 200px; background: linear-gradient(90deg, var(--primary-blue), #2c3e50); color: white; padding: 15px; border-radius: 8px; text-align: center;">
|
||||
<i class="fas fa-desktop fa-2x"></i>
|
||||
<p>桌面端布局</p>
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 200px; background: linear-gradient(90deg, var(--success), #27ae60); color: white; padding: 15px; border-radius: 8px; text-align: center;">
|
||||
<i class="fas fa-tablet-alt fa-2x"></i>
|
||||
<p>平板端布局</p>
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 200px; background: linear-gradient(90deg, var(--warning), #e67e22); color: white; padding: 15px; border-radius: 8px; text-align: center;">
|
||||
<i class="fas fa-mobile-alt fa-2x"></i>
|
||||
<p>移动端布局</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer>
|
||||
<p>© 2023 专业文档模板 | 设计规范演示</p>
|
||||
<div class="footer-links">
|
||||
<a href="#"><i class="fab fa-github"></i> GitHub</a>
|
||||
<a href="#"><i class="fas fa-book"></i> 文档</a>
|
||||
<a href="#"><i class="fas fa-question-circle"></i> 帮助</a>
|
||||
<a href="#"><i class="fas fa-envelope"></i> 联系</a>
|
||||
</div>
|
||||
<p>遵循现代网页设计规范，提供优秀的用户体验和开发体验。</p>
|
||||
<p style="margin-top: 15px; font-size: 0.9rem; color: #999;">最后更新: 2023年10月</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 复制代码功能
|
||||
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 = '已复制!';
|
||||
this.style.backgroundColor = 'rgba(46, 204, 113, 0.3)';
|
||||
|
||||
setTimeout(() => {
|
||||
this.textContent = originalText;
|
||||
this.style.backgroundColor = '';
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// 侧边栏导航激活状态
|
||||
document.querySelectorAll('.nav-menu a').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
if (this.getAttribute('href').startsWith('#')) {
|
||||
e.preventDefault();
|
||||
document.querySelectorAll('.nav-menu a').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
this.classList.add('active');
|
||||
|
||||
// 滚动到对应区域
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
window.scrollTo({
|
||||
top: targetElement.offsetTop - 20,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 卡片悬停效果增强
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
|
||||
// 移动端侧边栏折叠功能
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
// 检测屏幕宽度，为移动端添加折叠功能
|
||||
function checkScreenSize() {
|
||||
if (window.innerWidth <= 768) {
|
||||
// 创建折叠按钮
|
||||
if (!document.querySelector('.collapse-btn')) {
|
||||
const collapseBtn = document.createElement('button');
|
||||
collapseBtn.className = 'btn btn-primary collapse-btn';
|
||||
collapseBtn.innerHTML = '<i class="fas fa-bars"></i> 导航菜单';
|
||||
collapseBtn.style.width = '100%';
|
||||
collapseBtn.style.marginBottom = '15px';
|
||||
|
||||
sidebar.insertBefore(collapseBtn, navMenu);
|
||||
|
||||
collapseBtn.addEventListener('click', function() {
|
||||
navMenu.style.display = navMenu.style.display === 'none' ? 'flex' : 'none';
|
||||
this.innerHTML = navMenu.style.display === 'none'
|
||||
? '<i class="fas fa-bars"></i> 显示导航'
|
||||
: '<i class="fas fa-times"></i> 隐藏导航';
|
||||
});
|
||||
|
||||
// 默认在移动端隐藏导航
|
||||
navMenu.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
// 移除折叠按钮并显示导航
|
||||
const collapseBtn = document.querySelector('.collapse-btn');
|
||||
if (collapseBtn) {
|
||||
collapseBtn.remove();
|
||||
}
|
||||
navMenu.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检查和窗口调整时检查
|
||||
checkScreenSize();
|
||||
window.addEventListener('resize', checkScreenSize);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user