网页设计与开发（HTML5+CSS3） 课件 项目5 利用盒子模型布局网页.pptx

项目5利用盒子模型布局网页录盒子模型基本属性的应用border属性的应用border-radius属性的应用padding和margin属性的应用录box-sizing属性的应用box-shadow属性的应用float属性的应用盒子模型清除浮动的应用

0910目录position属性的应用背景属性的应用1112opacity属性的应用渐变属性的应用

1314目录重复渐变属性的应用使用盒子模型布局网页

项目描述利用前面所学知识只能实现一些简单的图文混排效果，无法对整个网页内容进行整体布局。本项目主要利用盒子模型从布局的角度出发对整个网页及各模块元素进行布局，并综合利用前面所学的HTML5和CSS3相关知识，制作一个“消防安全知识教育”网页

项目效果图

知识储备

知识目标理解盒子模型相关属性的用法和用途理解元素的浮动和定位原理及渐变属性的原理掌握背景属性的设置方法010203

盒子模型属性的基本应用01

任务描述使用盒子模型常用的基本属性定义网页内容，效果如右图所示。

知识点拨?盒子模型01CSS盒子模型就是在网页设计中CSS技术所使用的一种思维模型。其常用的属性有content（内容）、padding（内边距）、border（边框）、margin（外边距）、width（宽度）和height（高度），如图5-2所示。图5-3中的left（左边）、right（右边）、top（顶部）、bottom（底部）常用来设置盒子模型相关属性不同方向的数值。

知识点拨?border（边框）属性02border属性的语法格式如下。border:border-widthborder-styleborder-colorborder-width用于设置边框宽度；border-style用于设置边框样式；border-color用于设置边框颜色。border-style是border属性不可或缺的属性值，具体应用在任务2中进行详细讲解。

知识点拨?padding（内边距）和margin（外边距）属性03padding（内边距）和margin（外边距）属性一般用来调整父级与子级元素之间的位置关系，具体应用在任务4中进行详细讲解。

盒子模型border属性的应用02

任务描述使用盒子模型的border属性对网页中的文本内容进行不同边框样式的设置，效果如右图所示。

知识点拨border-style属性01

知识点拨综合设置边框02border（边框）属性可以一次性设置盒子模型4条边框的宽度、样式和颜色，也可以单独设置某条边框的宽度、样式和颜色，如使用border-top、border-right、border-bottom、border-left属性。在设置border属性时，宽度、样式、颜色三个属性值不分先后顺序。该任务在设置边框时没有设置颜色，所以边框的颜色就和文本一起应用了body{color:red;}这个样式。对图片也可以设置边框，其和对文本设置边框类似，这里不做详细介绍。

盒子模型border-radius属性的应用03

任务描述使用盒子模型的border-radius属性对网页中的图片分别进行不同样式的设置，效果如右图所示。

知识点拨border-radius属性用于为元素设置圆角边框，基本语法格式如下。border-radius：参数1/参数2在上面的语法格式中，参数1表示圆角的水平半径，参数2表示圆角的垂直半径，两个参数之间用“/”隔开（/不是必须的，没有时用空格隔开），常用的单位是px，参数可以是一个数值，也可以是一个百分比。5-3-1.html设置了水平半径为100px,垂直半径为50px的圆角边框效果。5-3-2.html设置了椭圆形边框，之所以是椭圆形边框，是因为该图片是长方形的，如果图片是正方形（图片宽度和高度一致）的，则border-radius:50%呈现的效果直接是圆形边框。border-radius属性可以接收1～4个值，规则如下。四个值：border-radius:15px50px30px5px;（依次分别表示左上角、右上角、右下角、左下角）；三个值：border-radius:15px50px30px;（第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角）；两个值：border-radius:15px50px;（第一个值表示左上角和右下角，第二个值表示右上角和左下角）；一个值：border-radius:15px;（该值表示四个角，即圆角半径都是一样的）。以上参数值为举例所用。border-radius属性01

盒子模型padding和margin属性的应用04

任务描述使用盒子模型的padding和ma