百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一：零基础HTML编码

课程概述

作业提交截止时间：04-24

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

了解HTML的定义、概念、发展简史

掌握常用HTML标签的含义、用法

能够基于设计稿来合理规划HTML文档结构

理解语义化，合理地使用HTML标签来构建页面

任务描述

参考示例图（点击查看），完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构）

任务注意事项

只需要完成HTML代码编写，不需要写CSS

示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定

尽可能多地尝试更多的HTML标签

在线学习参考资料

Web相关名词通俗解释

MDN HTML入门

慕课HTML+CSS基础教程视频

任务二：零基础HTML及CSS编码（一）

课程概述

作业提交截止时间：04-24

重要说明

任务目的

针对设计稿样式进行合理的HTML架构，包括以下但不限于：

掌握常用HTML标签的含义、用法
能够基于设计稿来合理规划HTML文档结构

理解语义化，合理地使用HTML标签来构建页面

掌握基本的CSS编码，包括以下但不限于：

了解CSS的定义、概念、发展简史
掌握CSS选择器的含义和用法

实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

基于第一个任务“零基础HTML编码”的代码，参考示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定

尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性

HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

慕课HTML+CSS基础教程视频

任务三：三栏式布局

课程概述

作业提交截止时间：04-24

重要说明

任务目标

掌握HTML/CSS布局的概念

掌握盒模型的概念

掌握position与float的概念以及在布局时的用法

任务描述

使用 HTML 与 CSS 按照示例图（点击查看）实现三栏式布局。

左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

任务注意事项

尝试 position 和 float 的效果，思考它们的异同和应用场景。

注意测试不同情况，尤其是极端情况下的效果。

图片和文字内容请自行替换，尽可能体现团队的特色。

调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。

改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。

其他效果图中给出的标识均被正确地实现。

参考资料

MDN：position：了解 CSS position 属性的基本知识

MDN：float：了解 CSS float 属性的基本知识

Learn CSS Positioning in Ten Steps：通过具体的例子熟悉 position 属性

清除浮动（clearfix hack）：清除浮动是什么，如何简单地清除浮动

StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读

任务四：定位和居中问题

重要说明

任务目标

实践HTML/CSS布局方式

深入了解position等CSS属性

任务描述

实现如示例图（点击打开）的效果

灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

任务注意事项

思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。

动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。

注意测试不同情况，尤其是极端情况下的效果。

调节浏览器宽度，灰色元素始终水平居中。

调节浏览器高度，灰色元素始终垂直居中。

调节浏览器高度和宽度，黄色扇形的定位始终准确。

其他效果图中给出的标识均被正确地实现，错一项扣一分。

参考资料

HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题

Centering in CSS: A Complete Guide：完整讨论了不同情况下的居中方案，建议自己思考之后再看答案

Get HTML & CSS Tips In Your Inbox：有人写了一个作弊工具生成居中代码，但是看着代码你明白为什么吗

任务五：零基础HTML及CSS编码（二）

重要说明

任务目的

针对设计稿样式进行合理的HTML架构，包括以下但不限于：

掌握常用HTML标签的含义、用法
能够基于设计稿来合理规划HTML文档结构
理解语义化，合理地使用HTML标签来构建页面
掌握基本的CSS编码，包括以下但不限于：
了解CSS的定义、概念、发展简史
掌握CSS选择器的含义和用法

实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

基于第一个任务“零基础HTML编码”的代码，参考示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写

头部和底部的黑色区域始终是100%宽

页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化

左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化

10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定

尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性

HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

慕课HTML+CSS基础教程视频

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

重要说明

任务目的

深入掌握CSS中的字体、背景、颜色等属性的设置

进一步练习CSS布局

任务描述

参考 PDS设计稿（点击下载），实现页面开发，要求实现效果与样例（点击查看）基本一致

页面中的各字体大小，内外边距等可参看标注图（点击查看）

页面宽度固定（定宽）

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

设计稿中的图片、文案均可自行设定

在Chrome中完美实现符合标注中的各项说明

有能力的同学可以尝试跨浏览器的兼容性

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

在线学习参考资料

MDN HTML入门
MDN CSS入门教程

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

重要说明

任务目的

通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力

学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变

任务描述

通过HTML及CSS实现设计稿设计稿PSD文件（点击下载），效果如效果图（点击打开）

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

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

设计稿中的图片、文案均可自行设定

在Chrome中完美实现与设计稿的各项字体、布局、内外边距等样式

有能力的同学可以尝试跨浏览器的兼容性

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

任务八：响应式网格（栅格化）布局

重要说明

任务目的

使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。

任务描述

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

任务注意事项

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

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

在线学习参考资料

BootStrap 官网：如果你没用过的话，至少了解一下它是做什么的

Bootstrap grid examples：改变浏览器宽度，查看不同类名元素的表现，理解网格系统的作用。然后，通过“审查元素”查看对应 CSS，思考这一系统是如何实现的

BootStrap 带 offset 的网格系统

Creating Your Own CSS Grid System：你可以先自己想想怎么实现，没有思路的话看看别人的做法

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

重要说明

任务目的

通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力

实践代码的复用、优化

任务描述

通过HTML及CSS实现设计稿设计稿PSD文件（点击下载），效果如效果图（点击打开）
整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript

tab只需要实现样式，有能力余力的同学可以尝试实现不使用JavaScript的情况下，实现Tab切换

所有的下拉菜单（Select）均要求按照设计稿样式实现，下拉后的样式自定义，不需要实现下拉选择的功能，但样式要实现

在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式

有能力的同学可以尝试跨浏览器的兼容性

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

任务十：Flexbox 布局练习

重要说明

任务目的

学习如何flex进行布局，学习如何根据屏幕宽度调整布局策略。

任务描述

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

任务注意事项

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

在线学习参考资料

Flexbox详解：了解 Flexbox 属性的含义
图解 CSS3 Flexbox 属性：看完这两篇，对 Flexbox 的了解就够了，多实践一下，理解会更深刻
Flexbox——快速布局神器
 使用 CSS 弹性盒
 MDN flex属性

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

重要说明

任务目的

进行移动开发时的HTML及CSS实践

掌握移动Web开发在页面架构和布局的方法及差异性

掌握移动Web开发页面调试的方法

任务描述

实现与设计图（点击查看）一致的移动端Web页面

任务注意事项

本任务只涉及 HTML 及 CSS

实现的页面和设计图在iOS Safari，微信，Android浏览器中均基本一致

HTML 及 CSS 代码结构清晰、规范

尝试在适合的地方使用CSS 3中的flex布局

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

在线学习参考资料

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

重要说明

任务目的

学习了解 CSS 3 都有哪些新特性，并选取其中一些进行实战小练习

任务描述

实现示例图（点击查看）中的几个例子

任务注意事项

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

在线学习参考资料