小薇学院

任务一：零基础HTML编码

• 效果图

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

• 效果图
• 如何布局一个表单，如任务图所示：左侧label区域要固定宽度，向右对齐。
• 使用line-height居中垂直对齐

任务三：三栏式布局

• 效果图
• 三栏布局几种方式
  • 浮动布局
    • 要浮动的元素放在前面
  • 绝对定位布局
  • margin负边距
• 内容随布局变化
  • 使用浮动布局的话，父元素清除浮动+ 浮动布局的方式，可以保证子元素高度自适应。

任务四：定位和居中问题

• 效果图
• 水平居中
  • 文本居中
  • 文档居中
• 垂直居中
• 清理浮动

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

• 效果图
• 自适应布局
  • img使用百分比
  • 边界百分比

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

• 效果图
• 段落高度的确定
  • 段落高度=文本高度+（段落line-height-文本font-size）
  • ul> li使用文本，如何利用line-height固定高度。