shumengya / 树萌芽の提示词大全

# 文档类网页样式规范 以下是规范化的核心样式代码，适用于文档类网页： ```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. 移动端适配：单列布局，适当调整内边距 页面内容结构包括：标题区、主要内容区（多个卡片）、侧边栏（辅助信息）、页脚 每个卡片包含：卡片标题、内容描述、代码示例（如有）、演示区域（如有） ```

代码架构采用模块化编写，避免代码量过大后期无法维护

给我这个项目起个简单通俗易懂的英文名