Mather

We create our own demons.

IFE 春季第一阶段任务总结

默认分类 0 评

百度前端技术学院 (Baidu Institute of Front-End Technology)是一个面向大学生的前端技术学习平台。在这里通过思考完成编码任务,总结编码中的知识点,审查他人的代码来提升学习效率与效果,帮助开发者们更加高效、系统地学习Web前端技术。

本人选择了 任务三~四 六~十二 完成学习第一学习阶段。


任务三:三栏式布局

任务描述

  • 使用 HTML 与 CSS 按照 示例图 实现三栏式布局。
  • 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

任务注意事项

  • 尝试 position 和 float 的效果,思考它们的异同和应用场景。
  • 注意测试不同情况,尤其是极端情况下的效果。
  • 图片和文字内容请自行替换,尽可能体现团队的特色。
  • 调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。
  • 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。
  • 其他效果图中给出的标识均被正确地实现。

Demo | Sourse

任务总结

  • 两侧的栏目使用浮动布局,父容器通过清除浮动来解决高度塌陷的问题。
  • 中间栏固定外边距看起来在两栏中间。
  • 图片与文字顶部对齐问题,图片浮动,使文字围绕图片。设置文字宽度限定折断的位置。

参考资料


任务四:定位和居中问题

任务描述

  • 实现如 示例图 的效果
  • 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。

任务注意事项

  • 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
  • 动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的。
  • 注意测试不同情况,尤其是极端情况下的效果。
  • 调节浏览器宽度,灰色元素始终水平居中。
  • 调节浏览器高度,灰色元素始终垂直居中。
  • 调节浏览器高度和宽度,黄色扇形的定位始终准确。

Demo | Sourse

任务总结

  • 居中块使用绝对定位布局,需要 margin 一半当前块的高度和宽度来保持绝对居中。
  • 如果居中块的 ::before ::after 还没有被使用,用来制造上下对角的扇形。否则该在居中块內前后多加元素来制作实体扇形。
  • 实体扇形如果使用 border-radius: 50% 需要对父元素设置 overflow: hidden ,否则圆形剩余的扇不会被遮挡。另一种方法是制造一个矩形,对其一角进行圆角处理。

参考资料


任务六:通过HTML及CSS模拟报纸排版

任务描述

  • 参考 PDS设计稿 ,实现页面开发,要求实现效果与 样例 基本一致
  • 页面中的各字体大小,内外边距等可参看 标注图
  • 页面宽度固定(定宽)

任务注意事项

  • 只需要完成HTML,CSS代码编写,不需要写JavaScript
  • 设计稿中的图片、文案均可自行设定
  • 在Chrome中完美实现符合标注中的各项说明
  • 有能力的同学可以尝试跨浏览器的兼容性
  • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

Demo | Sourse

任务总结

  • 顶部文字在红色块内底边对齐,直接的方法是使用百分比相对定位。红块占位使用 display: inline-block
  • 右侧字母下划线 text-decoration: underline
  • 直接转换HTML内容为小型的大写 font-variant: small-caps
  • 将单词首个字母转换为大写 text-transform: capitalize
  • 左下图文环绕,右浮动一不可见的元素使,图片出现在文章中的固定位置,图片右浮动的同时清除右方浮动。但这样做使得首字属性 :first-letter 不能左浮动,需取首字母作为单独元素
  • content: open-quote 实现大引号
  • CSS 三角形实现:
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #11456b;

参考资料

MDN HTML入门
MDN CSS入门教程


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

任务描述

  • 通过HTML及CSS实现设计稿 设计稿PSD文件 ,效果如 效果图
  • 设计稿是有一定宽度的,这个宽度为页面的最小宽度,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的宽度应该保持和浏览器窗口宽度一致,具体哪些部分题目不做具体指明,看看大家的判断如何。

任务注意事项

  • 只需要完成HTML,CSS代码编写,不需要写JavaScript
  • 设计稿中的图片、文案均可自行设定
  • 在Chrome中完美实现符合标注中的各项说明
  • 有能力的同学可以尝试跨浏览器的兼容性
  • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

Demo | Sourse

任务总结

  • 导航栏动画。先设置 border-bottom: 0px #e7504d solid 加上过效果,鼠标悬停后再设定底边宽度 border-bottom-width: 4px
  • 使用 img 标签充当自适应背景时添加 width: 100%;height: auto;两项属性。
  • 四纵列利用平分的百分比宽度左浮动,百分比内边距。条形分割同样使用百分比的 top 来定位。另一种较好的解决方案是使用 Flex布局。
  • 消除下拉菜单默认样式 -webkit-appearance: none;并利用 background 组合属性来伪装成下拉按钮。
  • 固定宽度元素设置自适应背景图 width: 100%; background-image: url('img'); background-repeat: no-repeat; background-size: 100% auto;

任务八:响应式网格(栅格化)布局

任务描述

  • 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中。

任务注意事项

  • 网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100%
    的宽度,出现在博客文章下方。网格布局是一种实现这一需求的办法,它的好处是,把所有的宽度分为固定栏数(常用 12

栏),从而更高效的控制元素宽度。而这功能,我们使用 HTML 和 CSS 就能实现了。

    • 以 BootStrap 的网格系统为例,DOM 元素类名形如 col-md-4;其中 col 是“列” column 的缩写;md 是 medium 的缩写,适用于应屏幕宽度大于 768px 的场景;4 是占四栏的意思。因此,col-md-4 的意思是,在屏幕宽度大于
    1. 时,该元素占四栏。

    Demo | Sourse

    任务总结

    • 最小列单元都是左浮动和均分的百分比宽度,并结合 @media 媒体查询对不同屏幕宽度的列宽度调节。
    • BootStrap Less 源码中有详细的栅格系统构造方法。

    参考资料


    任务九:使用HTML/CSS实现一个复杂页面

    任务描述

    • 通过HTML及CSS实现设计稿 设计稿PSD文件,效果如 效果图
    • 整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致
    • CSS Sprite 在线拼合

    任务注意事项

    • 只需要完成HTML,CSS代码编写,不需要写JavaScript
    • tab只需要实现样式,有能力余力的同学可以尝试实现不使用JavaScript的情况下,实现Tab切换
    • 所有的下拉菜单(Select)均要求按照设计稿样式实现,下拉后的样式自定义,不需要实现下拉选择的功能,但样式要实现
    • 在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式
    • 有能力的同学可以尝试跨浏览器的兼容性
    • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

    Demo | Sourse

    任务总结

    • 多元素复杂页面应注意 margin padding 之间的配合来布局。
    • 顶栏、侧边栏、导航栏均使用 fixed 布局,中间内容则给对应外边距。
    • 使用 :focus 实现鼠标焦点在搜索栏上其宽度变化的动画。
    • i 标签可用于设定文字前的 icon ,一般使用 CSS Sprite 的方式,利用 background-position 和宽高为背景图案定位。
    • 盒模型为 box-sizing: border-box; 状态下,borderpadding 的设置都影响元素的宽高。
    • 善用 ::after ::before 伪对象能减少HTML内容来实现一些元素上的装饰(色块、线、点等)。
    • 结合 input label 使用锚点来制作纯CSS的标签页。
    • 多选菜单在火狐浏览器下还应 -moz-appearance: none 来消除默认样式。

    任务十:Flexbox 布局练习

    任务描述

    • 需要实现的效果如 效果图 所示,调整浏览器宽度查看响应式效果,红色的文字是说明,不需要写在 HTML 中。

    任务注意事项

    • 只需要完成HTML,CSS代码编写,不需要写JavaScript
    • 屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,而不要改动第一个元素的边框颜色与高度实现效果图。
    • 思考 Flexbox 布局和网格布局的异同,以及分别适用于什么样的场景。可以搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。
    • HTML 及 CSS 代码结构清晰、规范

    Demo | Sourse

    任务总结

    • Flex 布局强而有力的布局方式,在很少代码量的情况下结合 @media 实现自适应的布局。
    • 加上浏览器前缀 -webkit- 。注意某些过时的浏览器仅支持旧版 Flexbox 语法。新版 Flexbox 在国内并未得到很高的支持度(移动设备上)。
    • flex-flowflex-directionflex-wrap 的结合属性,定义主轴的排列方向和换行方式。
    • 注意,设为 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效。

    参考资料


    任务十一:移动Web页面布局实践

    任务描述

    • 实现与 设计图 一致的移动端Web页面

    任务注意事项

    • 本任务只涉及 HTML 及 CSS
    • 实现的页面和设计图在iOS Safari,微信,Android浏览器中均基本一致
    • HTML 及 CSS 代码结构清晰、规范
    • 尝试在适合的地方使用CSS 3中的flex布局 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

    Demo | Sourse

    任务总结

    • 引入 flexible.js 移动端自适应方案来处理不同屏幕下CSS像素与物理像素不对应的问题。CSS rem 单位相对于 <html> 根元素来做字体大小计算,手动或自动把 px 单位转成 rem ,字体依然使用 px 单位。
    • Flexible.js 会将设计稿宽度分成 100份,每10份为 1rem1rem 为设计稿的1/10 宽度,也是 html 根元素的字体大小。(1000px的设计稿,1rem = 100px)
    • Flexible.js 对字体的自适应,用 CSS属性选择器来 data-dpr 判断属性值来适应高PPI的移动设备。
    • 如无特殊情况,width/height/padding/margin都使用rem,border-width和font-size使用px —— 大漠

    • 对重复内容的行列使用 Flex布局能减少非常多的代码量。
    • wrapper 进行 max-width 设定为 100rem 防止宽屏显示器下拉伸无法达到设计稿要求。

    参考资料

    任务十二:学习CSS 3的新特性

    任务描述

    • 实现 示例图 中的几个例子
    • 实现单双行列不同颜色,且前三行特殊表示的表格
    • 实现正常状态和focus状态宽度不一致的input文本输入框,且鼠标焦点进入输入框时,宽度的变化以动画呈现
    • 不使用JavaScript,实现一个Banner图轮流播放的效果,且点击右下角的1,2,3可以切换到对应Banner图片

    任务注意事项

    • 本任务只涉及 HTML 及 CSS
    • HTML 及 CSS 代码结构清晰、规范
    • 除了任务中的3个小任务,尽可能多地尝试 CSS 3 的其他新特性

    Demo | Sourse

    任务总结

    • Banner 的实现是利用 锚点 :target 定位结合 animation 特性产生切换效果。
    • 注意表格内 <table> <caption> <thead> <tbody> 标签的语义化。

    参考资料

    IFE 春季第二阶段任务总结
    
    发表评论
    撰写评论