任务五：零基础HTML及CSS编码（二）

面向人群：

零基础或初学者

难度：

简单

重要说明

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

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

任务目的

• 针对设计稿样式进行合理的HTML架构，包括如下但不限于：
  • 掌握经常使用HTML标签的含义、用法
  • 可以基于设计稿来合理规划HTML文档结构
  • 理解语义化，合理地使用HTML标签来构建页面
• 掌握基本的CSS编码，包括如下但不限于：
  • 了解CSS的定义、概念、发展简史
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

• 基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增长CSS样式代码的编写
• 头部和底部的黑色区域始终是100%宽
• 页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化
• 左侧的各个模块里面的内容宽度跟随左侧总体宽度同步自适应变化
• 10张图片须要永远都完整展示，因此会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行

任务注意事项

• 只须要完成HTML，CSS代码编写，不须要写JavaScript
• 示例图仅为参考，不须要彻底实现一致，其中的图片、文案都可自行设定
• 尽量多地尝试不一样的、更多的样式设定来实践各类CSS属性
• HTML 及 CSS 代码结构清晰、规范

任务协做建议

• 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
• 能够各自完成任务实践，也能够按照如下分模块而后各自分工完成
  1. 头部、底部及总体左右布局架构
  2. 右侧表单
  3. 前面两篇文章部分
  4. 图片部分
  5. 表格部分
• 交叉互相Review其余人的代码，建议每一个人至少看一个同组队友的代码
• 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

• MDN HTML入门
• MDN CSS入门教程
• 慕课HTML+CSS基础教程视频