任务九：使用HTML/CSS实现一个复杂页面

面向人群：

有一定HTML/CSS基础的同学

难度：

中等

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

• 通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力
• 实践代码的复用、优化

任务描述

• 通过HTML及CSS实现设计稿 设计稿PSD文件（点击下载），效果如 效果图（点击打开）
• 整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致

任务注意事项

• 只需要完成HTML，CSS代码编写，不需要写JavaScript
• tab只需要实现样式，有能力余力的同学可以尝试实现不使用JavaScript的情况下，实现Tab切换
• 所有的下拉菜单（Select）均要求按照设计稿样式实现，下拉后的样式自定义，不需要实现下拉选择的功能，但样式要实现
• 在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式
• 有能力的同学可以尝试跨浏览器的兼容性
• 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务协作建议

• 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
• 可以各自完成任务实践，也可以按照以下分模块然后各自分工完成
  1. 整体页面布局，整个顶部，右侧的面包屑，及右侧中间的两个第一组项目
  2. 整个左侧
  3. 右侧上面的前三部分：查询选项部分，价格显示部分，4月统计部分
  4. 右侧下方的2个模块，日历及表格
  其中，有一些公用组件也可以拆解到某个同学来进行
  1. 蓝色按钮
  2. 下拉菜单（Select）
  3. 右侧下方4个模块的面板样式
• 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
• 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

• MDN HTML入门
• MDN CSS入门教程