《HTML5+CSS3网页制作》课件——模块五 盒子模型.pptxVIP

模块五盒子模型任务1盒子模型及应用网页制作CSSHTML

知识准备——盒子模型实战演练——制作“时代楷模”网页盒子模型及应用0201进阶训练——制作“用户中心”网页03动手实践——制作“鹤壁职业技术学院校徽”网页04

1.理解盒子模型的基本概念2.掌握盒子模型的属性设置3.应用盒子模型进行网页布局盒子模型及应用学习目标：

1.鼓励学生运用盒子模型等设计原理，进行独特的包装设计，培养学生的创新意识和创新能力，以适应现代经济社会的发展需求。2.要求学生注重细节，追求完美的设计效果，从而培养学生的工匠精神，即对工作的精益求精和追求卓越的态度。3.在包装设计中融入中国传统文化元素，通过设计具有中国特色的包装作品，增强学生的文化自信和民族自豪感。4.强调职业道德和社会责任的重要性，引导学生树立正确的价值观，关注社会热点和环保问题，为社会的可持续发展做出贡献。盒子模型及应用思政目标：

1知识准备--课程引入盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型

21知识准备--课程引入1盒子模型在网页设计中的重要性盒子模型是CSS布局的核心，决定了元素如何占据空间，是网页设计的基础。

内容用content来表示，内容占有一定的页面空间，通常用它的宽度width，高度height来表示内容的外面是内边距padding内边距的外面是边框border边框的外面是外边距margin1知识准备--组成部分

3盒子的实际宽度=width+padding（左右）+border（左右）+margin（左右）盒子的实际高度=height+padding（上下）+border（上下）+margin（上下）1知识准备--尺寸计算

41知识准备--边框设置1.?边框样式border-styleborder-style：上边框样式[右边框样式?下边框样式?左边框样式]；基本格式border-style：上边框样式[右边框样式下边框样式左边框样式]；

在设置边框样式时，可以对盒子的单边进行设置，具体格式如下：border-top-style：上边框样式；border-right-style：右边框样式；border-bottom-style：下边框样式；border-left-style：左边框样式；41知识准备--边框设置1.?边框样式border-style

综合设置4条边的样式当设置4个属性值时，边框样式的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式；当设置3个属性值时，为上，左右，下；当设置2个属性值时，为上下和左右;设置1个属性值时，为4边的公用样式；41知识准备--边框设置1.?边框样式border-style

41知识准备--边框设置2.?边框高度border-widthborder-style：上边框样式[右边框样式?下边框样式?左边框样式]；基本格式border-width：上边框宽度[右边框宽度下边框宽度左边框宽度]；

同边框样式一样，边框宽度可以针对4条边分别进行设置，具体格式如下：border-top-width：上边框宽度；border-right-width：右边框宽度；border-bottom-width：下边框宽度；border-left-width：左边框宽度；41知识准备--边框设置2.?边框高度border-width

综合设置4条边的宽度边框宽度的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框宽度会采用值复制的原则，将省略的属性值默认为某一边的宽度；当设置3个属性值时，为上，左右，下；当设置2个属性值时，为上下和左右；当设置1个属性值时，为4边的公用宽度；41知识准备--边框设置2.?边框高度border-width

41知识准备--边框设置3?边框颜色border-colorborder-style：上边框样式[右边框样式?下边框样式?左边框样式]；基本格式border-color：上边框颜色[右边框颜色下边框颜色左边框颜色]；

在设置边框颜色时，可以对盒子的单边进行设置，具体格式如下：border-top-color：上边框颜色；border-right-color：右边框颜色；border-bottom-color：下边框颜色；border-left-color：左边框颜色；41知识准备--边框设置3?边框颜色border-color

当设置4个属性值时，边框颜色的写法会按照上右下左