文档类网页模板
· 5.2 KiB · Text
原始檔案
# 文档类网页样式规范
以下是规范化的核心样式代码，适用于文档类网页：
```css
/* ===== 基础重置与全局样式 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* ===== 布局系统 ===== */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.main-content {
flex: 3;
min-width: 300px;
}
.sidebar {
flex: 1;
min-width: 250px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
/* ===== 卡片设计 ===== */
.card {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 20px;
margin-bottom: 20px;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.card-header {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
/* ===== 排版系统 ===== */
h1, h2, h3, h4 {
color: #2c3e50;
margin-bottom: 15px;
}
h1 {
text-align: center;
margin-bottom: 25px;
color: #2980b9;
font-size: 2.5rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
h2 {
color: #3498db;
font-size: 1.8rem;
}
h3 {
color: #2980b9;
font-size: 1.4rem;
}
p {
margin-bottom: 15px;
}
/* ===== 代码块样式 ===== */
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
font-size: 0.9rem;
}
.tag {
display: inline-block;
background: #ecf0f1;
color: #2c3e50;
padding: 2px 8px;
border-radius: 3px;
font-family: monospace;
font-size: 0.9rem;
margin: 0 3px;
}
.highlight {
color: #e74c3c;
font-weight: bold;
}
/* ===== UI组件 ===== */
.btn {
display: inline-block;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.3s;
margin: 5px;
}
.btn:hover {
background: #2980b9;
}
.alert {
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.badge {
display: inline-block;
background: #e74c3c;
color: white;
padding: 3px 8px;
border-radius: 10px;
font-size: 0.8rem;
margin-left: 5px;
}
/* ===== 演示区域样式 ===== */
.demo-box {
border: 2px dashed #3498db;
padding: 15px;
margin: 15px 0;
background-color: #f8f9fa;
border-radius: 5px;
}
.flex-container {
display: flex;
justify-content: space-between;
margin: 15px 0;
}
.flex-item {
background: #2ecc71;
color: white;
padding: 15px;
border-radius: 5px;
width: 30%;
text-align: center;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
margin: 15px 0;
}
.grid-item {
background: #9b59b6;
color: white;
padding: 15px;
border-radius: 5px;
text-align: center;
}
/* ===== 导航菜单 ===== */
.nav-menu {
display: flex;
background: #2c3e50;
border-radius: 5px;
overflow: hidden;
margin: 15px 0;
}
.nav-item {
padding: 12px 20px;
color: white;
text-decoration: none;
transition: background 0.3s;
}
.nav-item:hover {
background: #3498db;
}
/* ===== 页脚 ===== */
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
color: #7f8c8d;
font-size: 0.9rem;
}
```
## 核心特点总结
1. **柔和的蓝白渐变背景** - 提供舒适的视觉体验
2. **卡片式设计** - 带悬停效果的信息容器
3. **响应式布局** - 适配桌面和移动设备
4. **精心设计的排版层次** - 清晰的标题层级
5. **丰富的UI组件** - 按钮、警告框、徽章等
6. **优雅的交互效果** - 平滑的过渡和悬停反馈
## 提示词模板
**AI提示词：**
```
创建一个专业的文档类网页，使用以下设计规范：
1. 整体采用柔和的蓝白色渐变背景（#f5f7fa到#c3cfe2）
2. 使用卡片式布局，卡片有圆角、阴影和悬停上浮效果
3. 标题采用#2c3e50到#3498db的蓝色系，有清晰的层级关系
4. 代码块使用深色背景（#2c3e50）和等宽字体
5. 包含响应式侧边栏和主内容区布局
6. 添加常用UI组件：按钮、警告框、徽章、导航菜单
7. 确保所有交互有平滑的过渡效果
8. 移动端适配：单列布局，适当调整内边距
页面内容结构包括：标题区、主要内容区（多个卡片）、侧边栏（辅助信息）、页脚
每个卡片包含：卡片标题、内容描述、代码示例（如有）、演示区域（如有）
```
| 1 | # 文档类网页样式规范 |
| 2 | |
| 3 | 以下是规范化的核心样式代码，适用于文档类网页： |
| 4 | |
| 5 | ```css |
| 6 | /* ===== 基础重置与全局样式 ===== */ |
| 7 | * { |
| 8 | margin: 0; |
| 9 | padding: 0; |
| 10 | box-sizing: border-box; |
| 11 | font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; |
| 12 | } |
| 13 | |
| 14 | body { |
| 15 | background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| 16 | color: #333; |
| 17 | line-height: 1.6; |
| 18 | padding: 20px; |
| 19 | max-width: 1200px; |
| 20 | margin: 0 auto; |
| 21 | } |
| 22 | |
| 23 | /* ===== 布局系统 ===== */ |
| 24 | .container { |
| 25 | display: flex; |
| 26 | flex-wrap: wrap; |
| 27 | gap: 20px; |
| 28 | margin-top: 20px; |
| 29 | } |
| 30 | |
| 31 | .main-content { |
| 32 | flex: 3; |
| 33 | min-width: 300px; |
| 34 | } |
| 35 | |
| 36 | .sidebar { |
| 37 | flex: 1; |
| 38 | min-width: 250px; |
| 39 | } |
| 40 | |
| 41 | @media (max-width: 768px) { |
| 42 | .container { |
| 43 | flex-direction: column; |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | /* ===== 卡片设计 ===== */ |
| 48 | .card { |
| 49 | background: white; |
| 50 | border-radius: 10px; |
| 51 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); |
| 52 | padding: 20px; |
| 53 | margin-bottom: 20px; |
| 54 | transition: transform 0.3s, box-shadow 0.3s; |
| 55 | } |
| 56 | |
| 57 | .card:hover { |
| 58 | transform: translateY(-5px); |
| 59 | box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); |
| 60 | } |
| 61 | |
| 62 | .card-header { |
| 63 | color: #2c3e50; |
| 64 | border-bottom: 2px solid #3498db; |
| 65 | padding-bottom: 10px; |
| 66 | margin-bottom: 15px; |
| 67 | display: flex; |
| 68 | align-items: center; |
| 69 | gap: 10px; |
| 70 | } |
| 71 | |
| 72 | /* ===== 排版系统 ===== */ |
| 73 | h1, h2, h3, h4 { |
| 74 | color: #2c3e50; |
| 75 | margin-bottom: 15px; |
| 76 | } |
| 77 | |
| 78 | h1 { |
| 79 | text-align: center; |
| 80 | margin-bottom: 25px; |
| 81 | color: #2980b9; |
| 82 | font-size: 2.5rem; |
| 83 | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); |
| 84 | } |
| 85 | |
| 86 | h2 { |
| 87 | color: #3498db; |
| 88 | font-size: 1.8rem; |
| 89 | } |
| 90 | |
| 91 | h3 { |
| 92 | color: #2980b9; |
| 93 | font-size: 1.4rem; |
| 94 | } |
| 95 | |
| 96 | p { |
| 97 | margin-bottom: 15px; |
| 98 | } |
| 99 | |
| 100 | /* ===== 代码块样式 ===== */ |
| 101 | .code-example { |
| 102 | background: #2c3e50; |
| 103 | color: #ecf0f1; |
| 104 | padding: 15px; |
| 105 | border-radius: 5px; |
| 106 | font-family: 'Courier New', monospace; |
| 107 | margin: 15px 0; |
| 108 | overflow-x: auto; |
| 109 | font-size: 0.9rem; |
| 110 | } |
| 111 | |
| 112 | .tag { |
| 113 | display: inline-block; |
| 114 | background: #ecf0f1; |
| 115 | color: #2c3e50; |
| 116 | padding: 2px 8px; |
| 117 | border-radius: 3px; |
| 118 | font-family: monospace; |
| 119 | font-size: 0.9rem; |
| 120 | margin: 0 3px; |
| 121 | } |
| 122 | |
| 123 | .highlight { |
| 124 | color: #e74c3c; |
| 125 | font-weight: bold; |
| 126 | } |
| 127 | |
| 128 | /* ===== UI组件 ===== */ |
| 129 | .btn { |
| 130 | display: inline-block; |
| 131 | background: #3498db; |
| 132 | color: white; |
| 133 | padding: 10px 20px; |
| 134 | border-radius: 5px; |
| 135 | text-decoration: none; |
| 136 | border: none; |
| 137 | cursor: pointer; |
| 138 | transition: background 0.3s; |
| 139 | margin: 5px; |
| 140 | } |
| 141 | |
| 142 | .btn:hover { |
| 143 | background: #2980b9; |
| 144 | } |
| 145 | |
| 146 | .alert { |
| 147 | padding: 15px; |
| 148 | border-radius: 5px; |
| 149 | margin: 15px 0; |
| 150 | } |
| 151 | |
| 152 | .alert-success { |
| 153 | background-color: #d4edda; |
| 154 | color: #155724; |
| 155 | border: 1px solid #c3e6cb; |
| 156 | } |
| 157 | |
| 158 | .alert-warning { |
| 159 | background-color: #fff3cd; |
| 160 | color: #856404; |
| 161 | border: 1px solid #ffeaa7; |
| 162 | } |
| 163 | |
| 164 | .badge { |
| 165 | display: inline-block; |
| 166 | background: #e74c3c; |
| 167 | color: white; |
| 168 | padding: 3px 8px; |
| 169 | border-radius: 10px; |
| 170 | font-size: 0.8rem; |
| 171 | margin-left: 5px; |
| 172 | } |
| 173 | |
| 174 | /* ===== 演示区域样式 ===== */ |
| 175 | .demo-box { |
| 176 | border: 2px dashed #3498db; |
| 177 | padding: 15px; |
| 178 | margin: 15px 0; |
| 179 | background-color: #f8f9fa; |
| 180 | border-radius: 5px; |
| 181 | } |
| 182 | |
| 183 | .flex-container { |
| 184 | display: flex; |
| 185 | justify-content: space-between; |
| 186 | margin: 15px 0; |
| 187 | } |
| 188 | |
| 189 | .flex-item { |
| 190 | background: #2ecc71; |
| 191 | color: white; |
| 192 | padding: 15px; |
| 193 | border-radius: 5px; |
| 194 | width: 30%; |
| 195 | text-align: center; |
| 196 | } |
| 197 | |
| 198 | .demo-grid { |
| 199 | display: grid; |
| 200 | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); |
| 201 | gap: 10px; |
| 202 | margin: 15px 0; |
| 203 | } |
| 204 | |
| 205 | .grid-item { |
| 206 | background: #9b59b6; |
| 207 | color: white; |
| 208 | padding: 15px; |
| 209 | border-radius: 5px; |
| 210 | text-align: center; |
| 211 | } |
| 212 | |
| 213 | /* ===== 导航菜单 ===== */ |
| 214 | .nav-menu { |
| 215 | display: flex; |
| 216 | background: #2c3e50; |
| 217 | border-radius: 5px; |
| 218 | overflow: hidden; |
| 219 | margin: 15px 0; |
| 220 | } |
| 221 | |
| 222 | .nav-item { |
| 223 | padding: 12px 20px; |
| 224 | color: white; |
| 225 | text-decoration: none; |
| 226 | transition: background 0.3s; |
| 227 | } |
| 228 | |
| 229 | .nav-item:hover { |
| 230 | background: #3498db; |
| 231 | } |
| 232 | |
| 233 | /* ===== 页脚 ===== */ |
| 234 | .footer { |
| 235 | text-align: center; |
| 236 | margin-top: 30px; |
| 237 | padding-top: 20px; |
| 238 | border-top: 1px solid #ddd; |
| 239 | color: #7f8c8d; |
| 240 | font-size: 0.9rem; |
| 241 | } |
| 242 | ``` |
| 243 | |
| 244 | ## 核心特点总结 |
| 245 | |
| 246 | 1. **柔和的蓝白渐变背景** - 提供舒适的视觉体验 |
| 247 | 2. **卡片式设计** - 带悬停效果的信息容器 |
| 248 | 3. **响应式布局** - 适配桌面和移动设备 |
| 249 | 4. **精心设计的排版层次** - 清晰的标题层级 |
| 250 | 5. **丰富的UI组件** - 按钮、警告框、徽章等 |
| 251 | 6. **优雅的交互效果** - 平滑的过渡和悬停反馈 |
| 252 | |
| 253 | ## 提示词模板 |
| 254 | |
| 255 | **AI提示词：** |
| 256 | |
| 257 | ``` |
| 258 | 创建一个专业的文档类网页，使用以下设计规范： |
| 259 | |
| 260 | 1. 整体采用柔和的蓝白色渐变背景（#f5f7fa到#c3cfe2） |
| 261 | 2. 使用卡片式布局，卡片有圆角、阴影和悬停上浮效果 |
| 262 | 3. 标题采用#2c3e50到#3498db的蓝色系，有清晰的层级关系 |
| 263 | 4. 代码块使用深色背景（#2c3e50）和等宽字体 |
| 264 | 5. 包含响应式侧边栏和主内容区布局 |
| 265 | 6. 添加常用UI组件：按钮、警告框、徽章、导航菜单 |
| 266 | 7. 确保所有交互有平滑的过渡效果 |
| 267 | 8. 移动端适配：单列布局，适当调整内边距 |
| 268 | |
| 269 | 页面内容结构包括：标题区、主要内容区（多个卡片）、侧边栏（辅助信息）、页脚 |
| 270 | 每个卡片包含：卡片标题、内容描述、代码示例（如有）、演示区域（如有） |
| 271 | ``` |
代码架构采用模块化编写，避免代码量过大后期无法维护