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

第五天和第六天:三种简历

普通

人数1185人在学习该课程,有885人已经完成该课程

时间平均用时3.7

关键词HTMLcss

课程概述

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

第五天和第六天 三种简历

课程目标

通过阅读及一个小型练习,掌握 CSS 盒模型及通过Float进行简单的布局

课程描述

阅读

今天我们要学习非常重要的一些知识,这些知识会伴随着你的前端生涯.
首先我们先学习一下盒模型的概念

接下来我们了解一下浮动

编码

今天的任务,我们将不在codepen上来实现,打开你电脑本地的代码编辑器(如VSCode,Sublime或者其它),创建一个项目目录,在目录下创建一个resume.html,再创建一个css目录,在css目录下创建一个style_1.css文件。

然后基于上面的阅读学习,实现如下设计稿的一份简历页面,HTML内容写在resume.html中,样式写在style_1.css中。

设计稿

实现过程中,请注意:

  • 实现时必须保证布局的一致
  • 字体、宽高、边距等不需要完全一致

阅读

在进行今天的第二个练习时,我们希望你首先阅读一些来自企业的HTML及CSS规范,比如下方的百度规范,你也可以自行搜索其他公司的编码规范

然后学习规范后,我们继续下一个编码任务

编码

依然还是使用resume.html,在css目录下创建style_2.css,然后在resume.html的CSS文件引用改为style_2.css。

参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上,根据样式需要进行调整。并在style_2.css中写入新样式。

设计稿

编码

最后一个任务,我们把这个挑战极端一些。在css目录中创建style_3.css。把resume.html中引用的css改为style_3.css。

参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上,根据样式需要进行调整。并在style_3.css中写入新样式

设计稿

编码

接下来,请你把resume.html中引用的css文件从style_3.css改回style_1.css或者style_2.css,看一下样式是否还健在?

如果没有,请对HTML或CSS代码进行相应调整,保证,无论是用 style_1.css 还是 style_2.css 或是 style_3.css,都可以保证页面按照设计稿的要求呈现。也就是说同一份HTML,可以在改变CSS代码的情况下,实现不同样式,达到HTML结构内容和CSS样式的解耦。

提交

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

验证

这两天的内容稍多,请反复确认你是否掌握了以下概念

  • 盒模型的概念
  • inline、block和inline-block的概念
  • 内外边距,宽度,高度,box-sizing等属性
  • 浮动,清除浮动
  • 如何使用浮动进行布局

总结

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

明天预告

明天的任务依然是一个跨天的带有较多练习的任务,我们将开始学习其他布局的方式,并迎接更真实的编码作业。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
第五天和第六天的笔记 盒模型和浮动2018-04-29 17:02158235
浮动和浮动的清除2018-04-28 18:3783410
第五天和第六天2018-04-29 03:466852
点击查看更多课程优秀笔记