HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 6 CSS3 排版属性.docxVIP

PAGE1

PAGE

单元6CSS3排版属性

课程名称

HTML5+CSS3+JavaScriptWeb前端基础教程

项目名称

CSS3列表、表格、盒子模型排版

任务名称

CSS3排版属性应用与网页布局优化

课时

4

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1．掌握CSS3列表样式（list-style-type、list-style-image）的配置；

2．熟悉CSS3表格样式（边框合并、对齐方式、隔行变色）；

3．理解CSS盒子模型（content、padding、border、margin）的原理；

4．掌握CSS3隐藏属性（display、visibility、opacity）的区别。

能力目标

1．能够自定义列表标记样式与表格布局；

2．能够使用盒子模型调整元素间距与边框；

3．能够完成仿写淘宝首页首页排版样式开发与Tab网页制作。

素质目标

1．培养网页布局的逻辑性与细节把控能力；

2．养成像素级还原设计图的严谨态度；

3．提升响应式排版的初步认知；

教学内容

1.任务描述：掌握CSS3排版属性，完成仿写淘宝首页首页排版样式与四大名著Tab网页制作；

2.任务展示与实现：

（1）教师演示列表样式、表格样式、盒子模型与隐藏属性的应用；

（2）学生动手制作带自定义样式的列表与隔行变色表格；

（3）分组开发淘宝首页排版样式与四大名著Tab网页；

3.教师讲解核心知识点：列表样式属性、表格边框合并、盒子模型组成、margin/padding用法、隐藏属性差异；

4.任务小结：排版布局的常见问题（如margin塌陷）与解决方案；

教学重点

（1）CSS盒子模型的组成与尺寸计算；

（2）表格样式（border-collapse、text-align）与列表样式（list-style）的配置；

（3）margin与padding的区别与应用场景；

教学难点

（1）盒子模型的实际尺寸计算（content-box与border-box）；

（2）margin塌陷现象的理解与解决；

（3）列表嵌套与表格复杂布局的样式统一；

教学准备

1.装有VSCode的电脑；

2.教学课件PPT（含盒子模型示意图、排版案例代码）；

3.淘宝首页排版设计图、四大名著Tab网页参考效果；

4.盒子模型计算练习素材；

作业设计

1.制作个人信息表，使用CSS设置表格隔行变色、边框合并与文字对齐；

2.优化之前的新闻列表页，使用盒子模型调整间距，自定义列表标记样式；

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

课前组织

1.教学准备：准备表格隔行变色案例、盒子模型示意图、四大名著Tab网页设计图，确保学生已掌握CSS基础选择器与属性。

2.学生引导：检查学生文章详情网页样式完成情况，收集样式设置中的问题；发放本节课实训任务单，明确核心任务是“制作四大名著介绍的Tab网页”。

3.复习导入：展示淘宝首页的排版效果，提问“如何实现元素的间距控制？”“如何让表格更美观？”，导入CSS3排版属性的学习。

课程

说明

【课前说明】

1.核心内容：CSS3列表样式、表格样式、盒子模型（content、padding、border、margin）、显示与隐藏属性（display、visibility、opacity）、阴影属性（box-shadow、text-shadow）。

2.学习目标：掌握盒子模型的原理与应用，能够控制元素的间距与边框；学会美化表格与列表；理解显示与隐藏属性的区别；能够添加阴影效果。

【目的】

让学生掌握“网页精准排版”的核心技术，解决商业项目中“元素对齐”“间距控制”“样式美化”等实际问题，提升网页的视觉质感。

课程

内容

描述

一、CSS3列表样式（讲授法+演示）

1.基础样式：讲解list-style-type（列表标记类型，如none、disc、decimal）、list-style-image（自定义标记图片）、list-style-position（标记位置），演示“去除列表默认标记（list-style:none）”的实现。

2.应用场景：以新闻列表为例，演示“自定义列表标记（如小图标）”“列表项间距控制（margin-bottom）”的样式。

二、CSS3表格样式（演示法+效果对比）

1.基础样式：讲解border-collapse（边框合并，collapse）、border-spacing（单元格间距）、text-