实现常见的技术产品官网的页面架构及样式布局

课程目标

通过实现一个常见的技术产品官网，加深对于 HTML、CSS 的实战能力，学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变。

阅读

• MDN HTML 入门 (opens new window)
• MDN CSS 入门教程 (opens new window)
• MDN 盒模型 (opens new window)
• MDN 浮动 (opens new window)
• MDN 定位 (opens new window)

编码

通过 HTML 及 CSS 实现设计稿 PSD 文件 (opens new window)，效果如效果图 (opens new window)

• 设计稿是有一定宽度的，这个宽度为页面的最小宽度，也就是说，当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面部分内容的宽度应该保持和浏览器窗口宽度一致，具体哪些部分题目不做具体指明，看看大家的判断如何。
• 只需要完成 HTML、CSS 代码编写，不需要写 JavaScript
• 设计稿中的图片、文案均可自行设定
• 在 Chrome 中完美实现与设计稿的各项字体、布局、内外边距等样式
• 有能力的同学可以尝试跨浏览器的兼容性
• 有能力的同学可以在实现一遍后尝试用 less、sass 或者 stylus 等再实现一次

提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

• 这里有很多方法 (opens new window)

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

• 日期，今天的学习总用时，今天学习的目标是什么，是否达成
• 哪些东西今天了解得比较透彻，说说自己的理解
• 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
• 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

预告

下一节的任务将学习其他布局方式，并迎接更真实的编码作业。