任务6 运用盒模型网页布局
盒子模型的内容实现方法
盒子模型的内容实现方法1.引言1.1 概述盒子模型是CSS中一个非常重要的概念和基础知识。
它是用来描述网页中各个元素在页面中所占空间的一种模型。
在Web开发中，盒子模型扮演着关键的角色，它影响到页面布局、元素间的空间分配以及样式的呈现。
盒子模型由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。
这四个部分共同构成了一个元素的尺寸和外观。
首先，内容(content)是指元素内部实际承载的内容，比如文字、图像或其他媒体内容。
它的大小可以通过设置宽度和高度来控制。
其次，内边距(padding)是指内容与边框之间的距离，它可以通过设置上、右、下和左四个方向的内边距值来控制。
内边距可以用来调整元素内容与边框的间距，实现更好的视觉效果。
边框(border)是包围元素内容和内边距的线条或样式。
它可以通过设置边框的宽度、样式和颜色来改变元素的外观。
边框的样式可以是实线、虚线、点线等，颜色则可以根据需求进行自定义。
最后，外边距(margin)是指元素与周围元素之间的间距。
它可以通过设置上、右、下和左四个方向的外边距值来控制。
外边距用于调整元素与其他元素之间的距离，实现页面布局的灵活性。
通过合理设置盒子模型的各个属性值，我们可以实现丰富多样的页面布局和样式效果。
盒子模型的概念和原理对于CSS的学习和掌握至关重要，它为我们构建美观、响应式的网页提供了基础和支持。
接下来，我们将详细探索盒子模型的内容实现方法，包括如何调整元素的大小、间距和边框样式等技巧与技术。
通过深入理解和运用这些方法，我们能够创建出更具吸引力和动态的网页设计。
文章结构部分的内容如下：1.2 文章结构本文将分为以下几个部分来介绍盒子模型的内容实现方法：1. 引言：首先，我们将简要概述本文的主题和内容。
介绍盒子模型的基本概念和原理，并阐明本文的目的。
2. 盒子模型的基本概念和原理：在本节中，我们将详细介绍盒子模型的基本概念和原理。
运用盒模型网页布局
运用盒模型网页布局
网页设计与制作课程组
目标 TARGET
知识目标
掌握盒子模型的原理； 掌握盒子模型的层次与的宽高计算； 掌握盒子模型的层次与的宽高计算； 掌握盒子的CSS3新增属性；
掌握元素的类型与转换。
1 初识盒子模型 2 盒子模型的常用属性
边框成脊形
使整个方框凹陷，即在外框内嵌入一个立体边框 使整个方框凸起，即在外框内嵌外一个立体边框
border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。 border-style也可以分别定义border-top-style、border-right-style、border-bottom-style、 border-left-style的样式。 橙色背景的solid（实线）dashed（虚线）、dotted（点线）、double（双实线）较为常用。
举例 演示
【实例6-1】认识盒子模型。
认识盒子模型
盒子模型的基本结构
作用：盒子模型便于网页的布局，其实就是就是多个盒子嵌套排列。例如，常用的div元素，就是英 文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网 页分割为独立的、不同的部分，以实现网页的规划和布局。
并且遵循值复制的原则，值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值， 省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果 。
举例：
“border-width:3px;” 表示4个边框的宽度都为3像素。
《Web前端开发项目教程》网页的蓝图--简单布局--使用盒模型划分页面
四个数值依次表示上、右、下、左
圆角边框的设置
可以使用下面方式同时设置四个角的样式：
border-radius:水平半径1~4/垂直半径1~4
取值单位可以是px，表示圆角半径，值越小，角越尖锐，负数无效，例如8px；还可以使用百 分比，此时圆角半径将基于盒子的宽度或高度像素数进行计算，例如50%，此时若盒子宽与 高取值相同，则得到一个圆形，否则为椭圆形。
“秋，揪也，物于此而揪敛也”。古人把立 秋当作夏秋之交的重要时刻，一直很重视这 个节气。据记载，宋时立秋这天宫内要把栽 在盆里的梧桐移入殿内，等到“立秋”时辰 一到，太史官便高声奏道：“秋来了。”奏 毕，梧桐应声落下一两片叶子，以寓报秋之 意。</p>
</div> </body>
2.4 盒子的外边距属性
border-top
Content内容
padding-right 右填充
border-bottom Margin-bottompadding-bottom
下填充
2.3 盒子的内填充属性
<style type="text/css">
*{padding: 0; margin: 0;}
/*将页面元素的默认内外边距置零*/
同时设置盒子的右外边距和下外边距，使盒子和父级元素之间拉开一定的距离，是一种 常见的页面排版方法。
div{
border:5px solid red;
margin-right:50px;
/*设置盒子的右外边距*/
margin-bottom:30px; /*设置盒子的下外边距*/
/*上面两行代码等价于margin:0 50px 30px 0;*/
标准盒子模型
标准盒子模型标准盒子模型是一种用于网页布局的模型，它将网页的每个元素都看作是一个矩形的盒子，这些盒子可以包含内容、内边距、边框和外边距。
标准盒子模型是网页设计中的重要概念，掌握好它可以帮助我们更好地进行网页布局设计。
接下来，我们将详细介绍标准盒子模型的相关知识。
盒子模型的组成部分。
在标准盒子模型中，每个元素都可以看作是一个矩形的盒子，这个盒子由内容区、内边距、边框和外边距组成。
内容区即元素中实际包含的内容，内边距是内容区和边框之间的空间，边框是内容区和外边距之间的边界，外边距是边框和相邻元素之间的空间。
理解这些组成部分对于进行网页布局设计非常重要。
盒子模型的属性。
在CSS中，我们可以通过设置盒子模型的属性来控制元素的大小、边距和边框样式。
其中，width和height属性用于设置元素的宽度和高度，padding属性用于设置内边距，border属性用于设置边框样式，margin属性用于设置外边距。
通过合理地设置这些属性，我们可以实现各种不同的网页布局效果。
盒子模型的应用。
标准盒子模型在网页设计中有着广泛的应用。
通过合理地使用盒子模型，我们可以实现各种不同的布局效果，包括单列布局、多列布局、定位布局等。
同时，盒子模型还可以帮助我们实现响应式布局，使网页能够适应不同大小的屏幕。
在实际的网页设计过程中，我们可以根据具体的需求，灵活地运用盒子模型，实现理想的布局效果。
盒子模型的优化。
在进行网页布局设计时，我们还需要考虑盒子模型的优化。
一方面，我们可以通过合理地设置盒子模型的属性，减少不必要的内外边距，使页面看起来更加美观；另一方面，我们还可以通过使用盒子模型的特殊属性，如box-sizing属性，来改变盒子模型的表现方式，以满足不同的设计需求。
总结。
标准盒子模型是网页设计中的重要概念，它将网页的每个元素都看作是一个矩形的盒子，这些盒子可以包含内容、内边距、边框和外边距。
理解盒子模型的组成部分和属性，灵活地运用它，可以帮助我们实现各种不同的网页布局效果。
CSS盒模型解析理解盒模型在页面布局中的作用
CSS盒模型解析理解盒模型在页面布局中的作用CSS盒模型解析CSS盒模型是网页设计中的重要概念之一，它定义了网页元素在页面布局中的尺寸和大小。
一、引言在网页设计过程中，盒模型起着决定元素尺寸布局的关键作用。
了解CSS盒模型对于掌握网页布局的核心原理至关重要。
二、CSS盒模型的构成CSS盒模型由四个主要部分构成：内容区域、内边距、边框和外边距。
这些部分一起决定了元素在页面上的尺寸。
1. 内容区域内容区域是元素实际显示内容的区域。
例如，一个段落元素的内容区域就是其中显示的文本内容。
2. 内边距内边距是内容区域与边框之间的空间。
通过设置内边距，我们可以控制元素内容与边框之间的距离。
3. 边框边框是包围内容区域和内边距的线条或样式。
我们可以设置边框的颜色、宽度和样式来改变元素的外观。
4. 外边距外边距是元素与其他元素之间的空间。
通过设置外边距，我们可以控制元素与其他元素之间的距离。
三、盒模型的分类CSS盒模型可以分为两种不同的形式：标准盒模型和IE盒模型。
1. 标准盒模型标准盒模型是CSS盒模型的默认形式，它将元素的尺寸计算包括了内容、内边距和边框。
即元素的总宽度等于内容区域宽度加上左右内边距和左右边框的宽度之和，总高度等于内容区域高度加上上下内边距和上下边框的高度之和。
2. IE盒模型IE盒模型是早期Internet Explorer浏览器采用的盒模型，它将元素的尺寸计算包括了内容、内边距、边框和外边距。
即元素的总宽度等于内容区域宽度加上左右外边距、左右内边距和左右边框的宽度之和，总高度等于内容区域高度加上上下外边距、上下内边距和上下边框的高度之和。
四、盒模型的应用理解盒模型的作用对于实现网页布局非常重要。
1. 控制元素尺寸通过设置元素的内容区域、内边距、边框和外边距，我们可以灵活地控制元素在页面上的大小和位置。
2. 布局和定位通过合理设置盒模型的各个组成部分，我们可以实现不同的布局和定位效果，比如水平居中、垂直居中等。
盒子模型教学思路设计
盒子模型教学思路设计引言盒子模型是前端开发中非常重要的概念之一，它是指页面中的每个元素都被看做是一个矩形的盒子。
了解盒子模型的概念和属性对于进行前端开发和页面布局至关重要。
本文将介绍如何设计盒子模型的教学思路，帮助学生更好地理解和应用盒子模型。
一、确定教学目标在设计盒子模型的教学思路之前，我们首先需要明确教学目标。
根据学生的水平和课程要求，可以有以下教学目标：1. 学生能够理解什么是盒子模型，了解盒子模型的概念和基本属性。
2. 学生掌握盒子模型的各个属性，包括内容区域、内边距、边框和外边距，并能够灵活运用。
3. 学生能够通过盒子模型实现页面布局，包括块级元素和行内元素的布局。
二、确定教学方法在盒子模型的教学中，理论与实践相结合是非常重要的。
可以采用以下教学方法：1. 理论讲解：通过PPT或白板等方式，向学生介绍盒子模型的概念、属性和应用场景。
2. 示例演示：通过实际案例演示，向学生展示如何应用盒子模型进行页面布局。
3. 手把手指导：让学生亲自操作，在教师的指导下编写代码，实践盒子模型的应用。
4. 练习和作业：布置一些实践任务和作业，让学生巩固和应用所学的盒子模型相关知识。
三、教学内容和步骤设计1. 盒子模型的概念和属性- 盒子模型的基本概念和原理- 盒子模型的各个属性：内容区域、内边距、边框和外边距- 盒子模型的默认属性和如何修改2. 盒子模型的应用场景和实践- 块级元素和行内元素的区别和应用- 使用盒子模型进行页面布局的基本原则- 实践示例：通过盒子模型实现常见的页面布局，如头部、侧边栏、内容和底部布局等3. 盒子模型的调试和优化- 盒子模型调试工具的使用- 盒子模型的常见问题和解决方法- 盒子模型的优化技巧和注意事项四、评估和反馈在教学过程中，及时进行评估和反馈是必不可少的。
可以采用以下方式：1. 课堂练习：教学过程中布置小练习，检验学生对于盒子模型的理解和应用能力。
2. 作业评估：布置一定难度的作业，对学生的盒子模型设计能力进行评估。
网页布局之盒子模型
⽹页布局之盒⼦模型⽹页布局之盒⼦模型⽹页：⽹页实际上是⼀层⼀层的，我们所设计的⽹页就是在这些层上⾯设计，我们所看到的⽹页是最上⾯的⼀层⽂档流：最下⾯的⼀层称为⽂档流，是⽹页的基础我们所创建的元素默认是在⽂档流中进⾏排列对于元素的两个状态：在⽂档流中不在⽂档流中（脱离⽂档流）块元素：页⾯中独占⼀⾏默认宽度是⽗元素的全部(会把⽗元素撑满)⾼度是被内容撑开（⼦元素）⾏内元素：页⾯中不会独占⼀⾏，只占⾃⾝⼤⼩，⾏内元素在页⾯中⾃左向右⽔平排列⾏内元素的默认宽度和⾼度都是被内容撑开盒⼦模型：（box model)概述：Css将页⾯中所有的元素都设置为⼀个矩形的盒⼦组成部分内容区（content）概念：元素中所有的⼦元素和⽂本内容都在内容区排列边框（border）概念：属于盒⼦边缘，⾥⾯是盒⼦内部，出了边框都是盒⼦的外部设置⽅式：设置边框，⾄少需要设置三个样式：1. 边框的宽度： border-width 有默认值⼀般为3个像素2. 边框的颜⾊： border-color 有默认值为⿊⾊3. 边框的样式： border-style 默认值为 none 表⽰没有边框solid 表⽰实线dotted 点状虚线dashed 虚线double 双实线4. border-XXX 可以指定四个⽅向的边框格式：（xxx指的是上述三个样式，即width,color,style)四个值：上，右，下，左三个值：上，左右，下两个值：上下，左右⼀个值：上下左右5. 还有⼀组可以分别设置上下左右边框格式：border-XXX-widthXXX可以是：top,right,bottom,left其他两个与border-width格式⼀样6. **border 简写属性 ,可以通过该属性，同时设置边框所有的相关样式，并没有顺序要求 **语法： border：soild red 20px;border:20px orange solid;此外还有：border-topborder-rightborder-bottomborder-leftborder-radius 圆⾓边框取值 50% 圆float：left/right 在页⾯中的布局左对齐/右对齐内边距（padding）内容区和边框之间的距离；⼀共有四个⽅向的内边距padding-toppadding-rightpadding-bottompadding-left内边距的设置会影响到盒⼦的⼤⼩背景颜⾊会延伸到内边距上⼀个盒⼦的可见框的⼤⼩，由内容区，内边距和边框共同决定padding：内边距的简写属性，可同时指定四个⽅向的内边距语法格式与border⼀样外边距（margin) :概念：⽤来确定盒⼦的位置，不会影响盒⼦可见框的⼤⼩四个⽅向的外边距：margin-top ：上外边距，设置⼀个值，元素会向下移动margin-right:默认情况下设置margin-right不会产⽣任何效果margin-bottom:下外边距，设置⼀个正值，其下边的元素会向下移动（挤开别的元素）margin-left：左外边距，设置⼀个正值，元素会向右移动元素在页⾯中是按照⾃左向右的顺序排列的margin 也可设置负值，元素会向相反⽅向移动margin 简写属性，可同时设置四个⽅向的外边距，⽤法和padding⼀样margin 会影响到盒⼦实际占⽤空间⽰例图盒⼦⼤⼩box-sizing ⽤来设置盒⼦尺⼨的计算⽅式（设置width和height的作⽤）可选值：content-box 默认值，宽度和⾼度⽤来设置内容区的⼤⼩border-box 宽度和⾼度⽤来设置整个盒⼦可见框的⼤⼩width 和height指的是内容区和内边距和边框的总⼤⼩。
CSS盒模型及其对页面布局的影响
CSS盒模型及其对页面布局的影响CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML （HyperText Markup Language）文档的样式和布局。
在CSS中，盒模型是一个重要的概念，它定义了元素在页面上的尺寸和排列方式。
了解CSS盒模型及其对页面布局的影响，对于前端开发人员来说是非常重要的。
一、什么是CSS盒模型CSS盒模型是用来描述元素在页面上所占空间的一种模型。
在这个模型中，每个元素都被看作是一个矩形的盒子，这个盒子由四个部分组成：内容区域、填充区域、边框区域以及外边距区域。
这四个部分的组合形成了一个完整的盒子，决定了元素在页面上的尺寸和位置。
1.1 内容区域内容区域是盒子中用来显示文本内容和其他子元素的部分。
它的大小由元素的宽度和高度属性来决定。
1.2 填充区域填充区域在内容区域和边框区域之间，用于定义元素内容与边框之间的间隔。
填充可以使用padding属性来进行设置。
1.3 边框区域边框区域是围绕在填充区域外的一条边框，用于装饰和区分元素。
边框的样式、粗细和颜色可以通过border属性进行定义。
1.4 外边距区域外边距区域是盒子与周围元素之间的间隔，用于控制元素和其他元素之间的距离。
外边距可以使用margin属性进行设置。
二、CSS盒模型对页面布局的影响CSS盒模型对页面布局起着重要的作用，通过合理地使用盒模型，我们可以灵活地控制元素的尺寸和位置，实现各种页面布局效果。
2.1 盒模型的宽度和高度计算在盒模型中，元素的宽度和高度由内容区域的大小加上填充、边框和外边距的值来计算。
这意味着在设置元素的宽度和高度时，需要考虑这些因素的影响。
例如，如果一个元素的宽度设置为200px，填充设置为10px，边框宽度设置为2px，外边距设置为20px，那么元素实际占据的宽度将是200px（内容区域） + 20px（左右填充） + 4px（左右边框） + 40px （左右外边距） = 264px。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
语法：position: static | relative | absolute | fixed;
方式一：静态定位static
方式二：相对定位relative
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践方式一：静态定位static、方式二：相对定位relative
任务描述
本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
教学内容
（1）盒子模型的原理；
（2）盒子的border、margin、padding的使用；
（3）盒子的CSS3新增属性；
（4）元素的类型与转换；
（5）浮动属性、清除属性、溢出处理；
（6）元素的定位方式。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解盒子模型的常用属性：
边距属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践padding内边距属性、margin外边距属性。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
盒子模型的原理；
盒子模型的常用属性：边距属性、边距属性的使用方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解元素的类型与转换：
元素的类型块级元素、行内元素、行内元素的区别与相互转化
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践元素的类型与转换方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
（1）CSS3新增属性
学生：实践练习
课堂
总结
（1）浮动属性float
（2）清除浮动属性clear
（3）溢出处理overflow
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：电商商品展示页面
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.4定位方式（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
知识讲授
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解溢出处理overflow：
语法：overflow: visible | hidden | auto | scroll;
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践overflow
实验教学法
多媒体
教师：辅导交流
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解
方式三：绝对定位absolute
方式四：固定定位fixed
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践方式三：绝对定位absolute、方式四：固定定位fixed。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
《网页设计与制作》课程教学单元设计
单元6运用盒模型网页布局
授课教师：网页设计与制作
授课班级:
学时：10
教学条件
实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络
教学素材
教材、课件、实训项目单、授课录像、案例库、教学网站等
教学目标设计
知识目标：
（1）掌握盒子模型的原理；
（2）掌握盒子模型的层次与的宽高计算；
（3）掌握盒子的border、margin、padding的使用；
（4）掌握盒子的CSS3新增属性；
（5）掌握元素的类型与转换；
（6）掌握浮动属性、清除属性、溢出处理；
（7）掌握元素的定位方式。
能力目标：
（1）能正确应用盒子模型布局网页页面；
（2）能根据网页页面效果，运用盒子模型与定位技术布局页面。
项目案例
综合实例：数字化教学资源平台网站布局
案例演示法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
自行完成数字化教学资源平台网站布局
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
方式一：静态定位static
方式二：相对定位relative
方式三：绝对定位absolute
方式四：固定定位fixed
任务分析与实现
（1）任务分析；
（2）任务实现代码。
教学过程设计
6.1盒子模型（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
任务描述
本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
讲授法
多媒体
教师：分析任务
学生：信息交流
知识讲授
讲解：盒子模型的原理、盒子模型的层次与宽高
重点：
（1）盒子模型的原理；
（2）盒子border、margin、padding的使用；
（3）盒子的CSS3新增属性；
（4）元素的类型与转换；
（5）浮动属性、清除属性、溢出处理；
（6）元素的定位方式。
难点：
（1）盒子的CSS3新增属性；
（2）元素的类型与转换；
（3）浮动属性、清除属性、溢出处理；
（4）元素的定位方式。
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践float属性。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解清除浮动属性clear
语法：clear: left | right | both;
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践clear属性。
任务驱动教学法
多媒体
课件演示
整理笔记
引导创新
任务拓展
页面主体区域的实现、页脚区域的实现。
任务驱动教学法
多媒体
拓展提高
课外实训
运用盒子模型与定位布局企业网站
项目教学法
网络环境
布置作业
提出要求
第二步：编写<banner>区域的CSS代码，通过定位确定3幅图片的位置，通过box-shadow属性设置图片的阴影效果。
任务驱动教学法
多媒体
教师：辅导交流
学生：实践练习
任务汇报
完成任务后，简短的交流
任务驱动教学法
多媒体
课件演示
教师：点评优化
学生：汇报交流
课堂
总结
综合使用HTML5+CSS3实现页面效果。
（2）元素的类型与转换方法
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：电商产品分类列表展示
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.3浮动属性、清除属性、溢出处理（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
知识讲授
讲解浮动属性：float
语法：float: none | left | right;
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：数字化教学资源平台网站布局
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.5任务实施：使用盒模型布局网站banner部分（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
任务描述
在任务5实现banner区域的基础上，综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践盒子模型的原理、盒子模型的层次与宽高计算机方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解盒子模型的常用属性：
边框border属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践边框border属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践圆角边框、图片边框的使用方法。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解CSS3新增属性：阴影效果box-shadow、阴影效果box-shadow
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践阴影效果box-shadow、阴影效果box-shadow的使用方法。
任务驱动教学法
多媒体
教师：分析任务
学生：信息交流
任务分析
综合应用CSS中盒布局的方法与思维进行页面布局。