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

第七天到第八天:学习布局

普通

人数1113人在学习该课程,有707人已经完成该课程

时间平均用时4.9

关键词HTMLcss

课程概述

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

第七天到第八天,学习布局

课程目标

通过大量练习,来学习布局的各种方式

复习

首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。

课程描述

阅读

编码

分别尝试使用Float、Position或者Flexbox来实现如下需求:

  • 实现一个两栏布局,左侧占30%宽度,右侧占70%宽度
  • 实现一个两栏布局,左侧固定宽度,右侧根据浏览器宽度进行自适应变化
  • 实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变化
  • 实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化
  • 实现一个三栏布局,左侧固定宽度,中间固定宽度,右侧根据浏览器宽度变化而自适应变化

要求:

  • 每一个需求都尽可能多地用多种方式来实现

编码

参考如下设计稿实现HTML页面及CSS样式:链接: https://pan.baidu.com/s/1IndqG9nanVhKxwysibZZRg 密码: vfs6

设计稿描述:

  • 设计稿分为头部,中间的Banner,主导航,内容区域,底部
  • 头部区域为100%宽的一个深色背景,头部中间有一块960px的定宽居中区域,里面包括了左边的Logo和右上角导航
  • Banner为100%宽的区块,中间右下方有banner轮显的当前图片数字的示例,其中正在显示的图片对应的数字有特殊样式(注意不需要实现轮显banner的业务逻辑,只是按照设计稿做静态样式)
  • 主导航区域,有一个100%宽的灰色线条,线条之上,在中间960px区域是导航菜单,当前正在浏览页对应的菜单有特殊样式
  • 主要内容区域,宽度为960px,里面每个内容都有至少80px的padding,每一个内容的宽度均为自适应,可以使用flex布局

提交

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

验证

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

  • Position相关概念及使用Postion进行布局的场景和方法
  • Flexbox相关概念及使用Flexobx进行布局的场景和方法
  • 掌握常用的两栏、三栏布局的各种方式

总结

把今天的学习用时,收获,问题进行记录,写成笔记

下一个任务预告

下一个的任务将是一个有真实设计稿的样式实战练习。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
IFE 基础学院 第七天和第八天2018-05-04 22:37123317
布局的学习2018-05-05 17:186324
定位与flex2018-05-12 18:1311572
点击查看更多课程优秀笔记