百度前端学院--小薇学院

任务一：零基础HTML编码

任务目的

• 了解HTML的定义、概念、发展简史
• 掌握常用HTML标签的含义、用法
• 能够基于设计稿来合理规划HTML文档结构
• 理解语义化，合理地使用HTML标签来构建页面

任务描述

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

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

任务目的

• 针对设计稿样式进行合理的HTML架构
  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化，合理地使用HTML标签来构建页面
• 掌握基本的CSS编码
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

基于第一个任务“零基础HTML编码”的代码，在步骤一的代码基础上增加CSS样式代码的编写

任务三：三栏式布局

任务目的

• 掌握HTML/CSS布局的概念
• 掌握盒模型的概念
• 掌握position与float的概念以及在布局时的用法

任务描述

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

任务四：定位和居中问题

任务目的

• 实践HTML/CSS布局方式
• 深入了解position等CSS属性

任务描述

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