百度前端技术学院 （Baidu Institute of Front-End Technology）是一个面向大学生的前端技术学习平台。在这里通过思考完成编码任务，总结编码中的知识点，审查他人的代码来提升学习效率与效果，帮助开发者们更加高效、系统地学习Web前端技术。
本人选择了 任务三~四 六~十二 完成学习第一学习阶段。
任务三：三栏式布局
任务描述
- 使用 HTML 与 CSS 按照 示例图 实现三栏式布局。
- 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试 position 和 float 的效果，思考它们的异同和应用场景。
- 注意测试不同情况，尤其是极端情况下的效果。
- 图片和文字内容请自行替换，尽可能体现团队的特色。
- 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
任务总结
- 两侧的栏目使用浮动布局，父容器通过清除浮动来解决高度塌陷的问题。
- 中间栏固定外边距看起来在两栏中间。
- 图片与文字顶部对齐问题，图片浮动，使文字围绕图片。设置文字宽度限定折断的位置。
参考资料
任务四：定位和居中问题
任务描述
- 实现如 示例图 的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
任务总结
- 居中块使用绝对定位布局，需要
margin一半当前块的高度和宽度来保持绝对居中。 - 如果居中块的
::before::after还没有被使用，用来制造上下对角的扇形。否则该在居中块內前后多加元素来制作实体扇形。 - 实体扇形如果使用
border-radius: 50%需要对父元素设置overflow: hidden，否则圆形剩余的扇不会被遮挡。另一种方法是制造一个矩形，对其一角进行圆角处理。
参考资料
任务六：通过HTML及CSS模拟报纸排版
任务描述
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 设计稿中的图片、文案均可自行设定
- 在Chrome中完美实现符合标注中的各项说明
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务总结
- 顶部文字在红色块内底边对齐，直接的方法是使用百分比相对定位。红块占位使用
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等再实现一次
任务总结
- 导航栏动画。先设置
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 的意思是，在屏幕宽度大于
768px 时，该元素占四栏。
任务总结
- 最小列单元都是左浮动和均分的百分比宽度，并结合
@media媒体查询对不同屏幕宽度的列宽度调节。 - BootStrap Less 源码中有详细的栅格系统构造方法。
参考资料
- BootStrap 官网：如果你没用过的话，至少了解一下它是做什么的
- [Bootstrap grid examples：改变浏览器宽度，查看不同类名元素的表现，理解网格系统的作用。然后，通过“审查元素”查看对应
CSS，思考这一系统是如何实现的][35]
任务九：使用HTML/CSS实现一个复杂页面
任务描述
- 通过HTML及CSS实现设计稿 设计稿PSD文件，效果如 效果图
- 整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致
- CSS Sprite 在线拼合
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- tab只需要实现样式，有能力余力的同学可以尝试实现不使用JavaScript的情况下，实现Tab切换
- 所有的下拉菜单（Select）均要求按照设计稿样式实现，下拉后的样式自定义，不需要实现下拉选择的功能，但样式要实现
- 在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务总结
- 多元素复杂页面应注意
marginpadding之间的配合来布局。 - 顶栏、侧边栏、导航栏均使用
fixed布局，中间内容则给对应外边距。 - 使用
:focus实现鼠标焦点在搜索栏上其宽度变化的动画。 i标签可用于设定文字前的 icon ，一般使用 CSS Sprite 的方式，利用background-position和宽高为背景图案定位。- 盒模型为
box-sizing: border-box;状态下，border和padding的设置都影响元素的宽高。 - 善用
::after::before伪对象能减少HTML内容来实现一些元素上的装饰（色块、线、点等）。 - 结合
inputlabel使用锚点来制作纯CSS的标签页。 - 多选菜单在火狐浏览器下还应
-moz-appearance: none来消除默认样式。
任务十：Flexbox 布局练习
任务描述
- 需要实现的效果如 效果图 所示，调整浏览器宽度查看响应式效果，红色的文字是说明，不需要写在 HTML 中。
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 屏幕宽度小于 640px 时，调整 Flexbox 的属性以实现第四个元素移动到最前面的效果，而不要改动第一个元素的边框颜色与高度实现效果图。
- 思考 Flexbox 布局和网格布局的异同，以及分别适用于什么样的场景。可以搜索一下别人的结论，不过要保持思辨的态度，不可直接接受别人的观点。
- HTML 及 CSS 代码结构清晰、规范
任务总结
- Flex 布局强而有力的布局方式，在很少代码量的情况下结合
@media实现自适应的布局。 - 加上浏览器前缀
-webkit-。注意某些过时的浏览器仅支持旧版 Flexbox 语法。新版 Flexbox 在国内并未得到很高的支持度（移动设备上）。 flex-flow是flex-direction和flex-wrap的结合属性，定义主轴的排列方向和换行方式。- 注意，设为 Flex 布局以后，子元素的
float、clear和vertical-align属性将失效。
参考资料
任务十一：移动Web页面布局实践
任务描述
- 实现与 设计图 一致的移动端Web页面
任务注意事项
- 本任务只涉及 HTML 及 CSS
- 实现的页面和设计图在iOS Safari，微信，Android浏览器中均基本一致
- HTML 及 CSS 代码结构清晰、规范
- 尝试在适合的地方使用CSS 3中的flex布局 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务总结
- 引入 flexible.js 移动端自适应方案来处理不同屏幕下CSS像素与物理像素不对应的问题。CSS
rem单位相对于<html>根元素来做字体大小计算，手动或自动把px单位转成rem，字体依然使用px单位。 - Flexible.js 会将设计稿宽度分成 100份，每10份为
1rem。1rem为设计稿的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 的其他新特性
任务总结
- Banner 的实现是利用 锚点
:target定位结合animation特性产生切换效果。 - 注意表格内
<table><caption><thead><tbody>标签的语义化。
参考资料