4. 响应式布局示例代码

/* 响应式布局基础设置 */
body {margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}.container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;
}/* 响应式导航 */
nav {background: #333;color: #fff;padding: 1rem 0;
}nav ul {list-style: none;display: flex;justify-content: space-around;
}nav li {margin: 0 1rem;
}/* 移动端适配 */
@media (max-width: 768px) {nav ul {flex-direction: column;align-items: flex-start;}nav li {margin: 0.5rem 0;}
}

色彩与字体：提升视觉辨识度与品牌一致性

色彩和字体是网站视觉传达的重要元素。在网络营销课程实训报告中，建议你按照以下规范来统一网站的视觉风格。

1. 色彩规范

• 主色（Primary Color）：品牌色，用于导航条、按钮等关键元素
• 次色（Secondary Color）：用于次要按钮、提示信息
• 文字色（Text Color）：正文建议使用#333333
• 背景色（Background Color）：#ffffff或#f9f9f9

建议使用工具如Coolors或Adobe Color生成配色方案，并确保色彩对比度达到WCAG AA或AA+标准。

2. 字体规范

• 中文常用字体：思源黑体、阿里巴巴普惠体、微软雅黑
• 英文常用字体：Roboto、Open Sans、Lato
• 字号建议：
  • 标题：24px ~ 36px
  • 正文：16px
  • 导航：14px ~ 16px
  • 按钮：16px

3. 示例字体设置代码

/* 字体设置 */
body {font-family: '思源黑体', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: 16px;line-height: 1.6;color: #333333;
}h1 {font-size: 36px;color: #2c3e50;
}h2 {font-size: 24px;color: #34495e;
}a {color: #3498db;text-decoration: none;
}a:hover {text-decoration: underline;
}

组件设计：统一风格，提高可维护性与复用性

在实训报告中，你需要展示对常用UI组件的掌控，如按钮、表单、卡片、导航条等。组件设计应具备统一的视觉风格、语义清晰、代码结构清晰，便于后续维护和复用。

1. 按钮组件设计规范

• 主按钮（Primary Button）：用于核心操作，建议使用品牌色
• 次按钮（Secondary Button）：用于次要操作，使用次色
• 禁用按钮：使用灰色，透明度降低至60%

2. 表单组件设计规范

• 输入框应统一宽度、边距、字体
• 必填项应标注“*”
• 错误提示应使用红色，文字清晰
• 按钮应与表单保持一致间距

3. 卡片组件设计规范

• 卡片应有统一边框、阴影、内边距
• 卡片间间距建议为1.5rem
• 卡片内容应有清晰的结构分层

4. 示例组件代码

<!-- 按钮组件示例 -->
<button class="primary-btn">提交</button>
<button class="secondary-btn">取消</button><!-- 表单组件示例 -->
<form><label for="username">用户名 <span>*</span></label><input type="text" id="username" name="username" required><div class="error-message">请输入用户名</div><button type="submit" class="primary-btn">注册</button>
</form><!-- 卡片组件示例 -->
<div class="card"><h3>课程详情</h3><p>网络营销课程实训报告包括网站设计、前端开发、SEO优化等多个环节。</p>
</div>

/* 按钮样式 */
.primary-btn {background-color: #3498db;color: #fff;padding: 0.75rem 1.5rem;border: none;border-radius: 5px;cursor: pointer;transition: background 0.3s;
}.primary-btn:hover {background-color: #2980b9;
}.secondary-btn {background-color: #ecf0f1;color: #333;padding: 0.75rem 1.5rem;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;
}/* 表单样式 */
form {max-width: 400px;margin: 1rem auto;
}label {display: block;margin-bottom: 0.5rem;
}input {width: 100%;padding: 0.5rem;margin-bottom: 1rem;border: 1px solid #ccc;border-radius: 4px;
}.error-message {color: red;font-size: 0.9rem;margin-bottom: 1rem;
}/* 卡片样式 */
.card {background: #fff;border: 1px solid #ddd;border-radius: 8px;padding: 1rem;margin: 1rem auto;max-width: 600px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

前端实现：代码规范与性能优化技巧

前端实现是整个实训报告的核心部分。良好的代码规范、性能优化、SEO技巧，将直接影响网站的运行效率和搜索引擎排名。

1. 代码规范与结构清晰

• 项目结构清晰，分目录存放HTML、CSS、JavaScript
• 使用语义化标签（
  ,

  ,
• CSS应使用模块化、BEM命名规范
• JavaScript应使用ES6+语法，并避免全局变量污染

2. SEO优化技巧

• 使用合理的标题标签（