# 复杂页面实现

# 课程目标

再次通过一个复杂的页面样式实现来实践前面几天学习到的 HTML 及 CSS 知识。务必不断重复审视自己的代码,是否每一个细节的实现都有理有据,是否做到最优。

# 课程描述

如果还没有完成上一课任务的同学,请先完成上一个任务。

# 阅读

将之前的材料以及自己搜索到的材料进行多次阅读,并重点阅读 W3C 规范

# 编码

使用 VS Code 等开发工具,按照设计图 (opens new window),进行页面的实现。

  • 最左侧一列要求自适应浏览器高度,左上面 4 个按钮相对浏览器左上角固定位置,左下方两个按钮相对浏览器左下角固定位置
  • 左侧第二列(蓝色背景色)导航列固定宽度,高度也是自适应浏览器高度,最下面的 Monthly Goals 部分的内容相对浏览器下边固定位置
  • 整个白色区域自适应宽度,右上方的人脸,名字部分相对浏览器右上角固定位置
  • 白色区域左侧列固定宽度,右侧列自适应宽度

# 要求

  • 代码风格符合某种编码规范
  • 尽可能按照设计稿的尺寸进行实现
  • 不需要考虑兼容 IE 浏览器
  • 根据上面的阅读学习,重构你的代码,优化代码结构及细节

# 提交

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

# 总结

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

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

# 预告

下一个的任务依然是一个逼近实战的练习。