现网页中常见的新闻列表效果，如下图所示。

新闻列表效果展示

鼠标以上链接文本效果

第六章 表格与表单（4学时）

[知 识 点]

? ? ? ? ? ?

表格标记 表格结构

CSS控制表格 表单标签 表单控件

CSS控制表单

[重 点]

? 表格标签

? CSS控制表格和表单 ? 表单标签

[难 点]

? 表单标签

? CSS控制表单

[基本要求]

? ? ? ?

掌握表格标记的使用 了解表格结构

掌握表单标记的使用 掌握CSS控制表单标记

[阶段案例]

使用表格与表单组织页面，并通过CSS控制表格与表单的显示样式，制作网页中常见的注册界面，效果如下图所示。

第七章 浮动与定位（8学时）

[知 识 点]

? ? ? ? ?

元素的浮动 清除浮动

Overflow属性 元素的定位 z-index属性

[重 点]

? 元素浮动 ? 元素定位

[难 点]

? 清除浮动

? 元素定位的分类

[基本要求]

? ? ? ?

掌握元素浮动

熟悉清除浮动的方法 掌握元素定位及其分类

熟悉z-index设置层的叠放次序

[阶段案例]

综合运用元素的浮动与定位，制作传智播客设计学院首页banner，效果如下图所示。

第八章 CSS高级技巧（6学时）

[知 识 点]

? CSS精灵技术 ? CSS滑动门技术 ? margin负值的应用

[重 点]

? CSS精灵技术 ? CSS滑动门技术 ? margin负值的应用

[难 点]

? CSS精灵原理分析

? CSS滑动门原理分析与切图 ? 运用margin负值综合运用

[基本要求]

? ? ? ?

掌握精灵图的制作

掌握利用CSS对精灵图片进行背景设置 掌握常见滑动门布局

掌握利用margin负值进行布局技巧

[案例实战1]

使用CSS精灵，制作精品课程模块，效果如下图所示。

[案例实战2]

使用CSS滑动门，制作梯形网站导航，效果如下图所示。

[案例实战3]

应用margin的负值，制作压线效果，如下图所示。

第九章 CSS布局与浏览器兼容性（6学时）

[知 识 点]

? 常见CSS网页布局 ? 通栏布局

? ? ? ?

CSS hack 分类 IE条件注释 常见IE6 BUG 盒子外边距合并

[重 点]

? 通栏布局 ? CSS hack

? 常见IE6 BUG

[难 点]

? CSS hack

[基本要求]

? ? ? ?

熟悉网页常见的布局 掌握网页通栏布局技巧 掌握 CSS hack

熟悉 IE6 下常见的BUG

第十章 实战开发(上)—传智播客设计学院首页面（6学时）

[知 识 点]

? ? ? ? ? ? ?

建立站点 页面分析 首页切图 制作头部 制作banner 制作主体 制作底部版权

[重 点]

? 制作页面首页

[难 点]

? 制作页面首页

[基本要求]

? ? ? ?

了解一个网站制作流程

熟悉根据效果图分析页面布局 掌握切图技巧 掌握首页布局

[实战开发]