shumengya 修订了这个 Gist 1 month ago. 转到此修订
没有任何变更
shumengya 修订了这个 Gist 1 month ago. 转到此修订
1 file changed, 0 insertions, 0 deletions
文档类网页模板 重命名为 文档类网页模板.md
文件已重命名，但内容与之前没有差异
shumengya 修订了这个 Gist 1 month ago. 转到此修订
1 file changed, 271 insertions
文档类网页模板(文件已创建)
| @@ -0,0 +1,271 @@ | |||
| 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 | + | ``` | |
shumengya 修订了这个 Gist 1 month ago. 转到此修订
2 files changed, 2 insertions
模块化代码架构.md(文件已创建)
| @@ -0,0 +1 @@ | |||
| 1 | + | 代码架构采用模块化编写，避免代码量过大后期无法维护 | |
项目英文起名.md(文件已创建)
| @@ -0,0 +1 @@ | |||
| 1 | + | 给我这个项目起个简单通俗易懂的英文名 | |
上一页
下一页