百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第十二天到第十五天,复杂页面实现

进阶

人数545人在学习该课程,有355人已经完成该课程

时间平均用时3.6

关键词HTMLcss

课程概述

作业提交截止时间:09-01

第十二天到第十五天,复杂页面实现

课程目标

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

课程描述

复习

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

编码

使用VS Code等开发工具,按照如下设计图,进行页面的实现

说明:

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

要求:

  • 代码风格符合某种编码规范
  • 尽可能按照设计稿的尺寸进行实现
  • 不需要考虑兼容IE浏览器

再次阅读

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

重构你的代码

根据上面的阅读学习,重构你的代码,优化代码结构及细节

提交

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

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

从下一个任务,我们将会开始ECMAScript的学习

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
Div+CSS课程总结+Git详细教程更新2018-05-11 22:5017566
点击查看更多课程优秀笔记