Web前端开发案例教程（HTML5+CSS3）课件 任务4 制作学院介绍页面.pptxVIP

;;使用盒子模型制作学院介绍页面，浏览效果如图所示。;4.2知识准备;4.2.1盒子模型的概念;例4-1使用div标记定义盒子。example01.html;4.2.1盒子模型的概念;4.2.1盒子模型的概念;要精确描述盒子的外观，需要设置盒子的边框属性（border）、内边距属性（padding）、外边距属性（margin）、盒子阴影属性（box-shadow）和盒子大小属性（box-sizing）等。;border-top：上边框宽度、样式、颜色

border-right：右边框宽度、样式、颜色

border-bottom：下边框宽度、样式、颜色

border-left：左边框宽度、样式、颜色

;若4个边框具有相同的宽度、样式和颜色，使用如下方式表示。;border：边框宽度样式颜色;CSS3中新增的border-radius属性可以给元素设置圆角边框。;在例4-1中对盒子添加圆角半径的设置。;;设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。;;padding-top：上内边距大小;上;margin-top：上外边距大小;用于给盒子添加周边阴影效果;示例;语法格式：box-sizing:content-box|border-box;;设置背景颜色或背景图像时可使用综合属性background，通过该属性可以设置与背景相关的所有值。;属性?;语法格式：background-color：#RRGGBB或#rgb(r,g,b)或预定义的颜色值;语法格式：background-image：URL（图像来源）;语法格式：background-repeat:repeat|no-repeat|repeat-x|

repeat-y|space|round;语法格式：background-position:关键字|百分比|长度;;语法格式：background-clip:border-box|padding-box|content-box;;语法格式：background-origin:padding-box|border-box|content-box;;例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html;例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html;语法格式：background:背景颜色url(图像)是否重复位置大小裁剪方式参考原点;;4.2.3背景属性;4.2.3背景属性;语法格式：opacity:不透明度值;;4.2.3背景属性;语法：background:linear-gradient(渐变角度,颜色值1,颜色值2,…,颜色值n);;例?4-10：设置具有渐变色的背景example10.html;4.3任务实现;4.3任务实现;任务小结;任务小结