- 面向人群：
- 初学者
- 难度：
- 简单
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。
任务目的
- 深入掌握CSS中的字体、背景、颜色等属性的设置
- 进一步练习CSS布局
任务描述
- 参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与 样例（点击查看） 基本一致
- 页面中的各字体大小，内外边距等可参看 标注图（点击查看）
- 页面宽度固定（定宽）
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 设计稿中的图片、文案均可自行设定
- 在Chrome中完美实现符合标注中的各项说明
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务协作建议
- 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
- 可以各自完成任务实践，也可以按照以下分模块然后各自分工完成
- 整体布局
- 顶部、大图及右上角
- 中间三段文字
- 左下角内容
- 右下角内容
- 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
- 相互讨论，最后合成一份组内最佳代码进行提交