2015年网页美化与布局电子教案07单元7　网页特效的美化与布局.docVIP

HTML5+CSS3网页美化与布局 单元7　网页特效的美化与布局 PAGE 12 PAGE 11 单元7　网页特效的美化与布局 将JavaScript程序嵌入HTML文档中，与HTML标签相结合，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效，使页面具有一定的动态效果，能吸引浏览者的眼球，提高页面的观赏性和趣味性。 【知识预览】 1．CSS框模型（Box） CSS框模型(Box Model)规定了元素框处理元素内容、 \o CSS 内边距 内边距、 \o CSS 边框 边框和 \o CSS 外边距 外边距的方式。CSS框模型组成结构示意图如图7-1所示，该图中element表示网页元素，border表示边框，padding表示内边距，也将其翻译为填充，margin表示外边距，也将其翻译为空白或边界。本书中我们把padding和margin统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。 图7-1　CSS框模型组成结构示意图 CSS的盒模型由四个区域组成：内容区、内边距区、边框区和外边距区，内边距区域控制边框与内容之间的位置关系，外边距区域控制元素与其他元素之间的距离。内边距、边框和外边距又分为上、右、下、左四个方向，四个方向可以定义为相同的值，也可以分别定义为不同的值或者保留为默认值，CSS盒模型的主要属性如图7-2。默认情况下，当元素包含内容后，width和height会自动调整为内容的宽度和高度。 图7-2　CSS盒模型的主要属性 CSS盒模型包括六个基本属性，其中width和height属性定义内容区域的宽度和高度，在内容区域的外面包裹了三层“外衣”：padding、border和margin，盒内使用background属性设置padding区域和内容区域的背景。 2．CSS边框属性（Border和Outline） 盒模型的边框也是网页布局的一个重要属性，网页中许多修饰性线条都是由边框来实现的。 （1）每个元素都包含四个方向上的边框：border-top、border-right、border-bottom、border-left，可以单独定义它们的属性，也可以使用border属性统一定义边框效果。 （2）可以独立定义边框的样式：border-top-style（顶边框样式）、border-right-style（右边框样式）、border-bottom-style（底边框样式）、border-left-style（左边框样式），也可以使用border-style（边框样式）属性统一定义边框的样式。 （3）可以独立定义边框的宽度：border-top-width（顶边框宽度）、border-right-width（右边框宽度）、border-bottom-width（底边框宽度）、border-left-width（左边框宽度），也可以使用border-width（边框宽度）属性统一定义边框的宽度。 （4）可以独立定义边框的颜色：border-top-color（顶边框颜色）、border-right-color（右边框颜色）、border-bottom-color（底边框颜色）、border-left-color（左边框颜色），也可以使用border-color（边框颜色）属性统一定义边框的颜色。 （5）内联元素也可以定义边框，但是内联元素的上下边框高度不会影响行高，而且不受段落和行高的约束，内联元素的左右边框宽度会挤占左右相邻文本的位置，而不会压住左右两侧文本。 3．CSS外边距属性（Margin） 盒模型的外边距是网页布局中一个重要属性，围绕在元素边框的空白区域称为外边距，设置外边距会在元素外创建额外的“空白”。合理地设置外边距可以使网页布局疏密有致，整体上看起来优美得体。设置外边距可以使用margin属性，也可以margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下、左外边距的大小。 4．CSS内边距属性（Padding） 盒模型的内边距位于元素边框和内容之间，类似于Word文档中的页边距。设置内边框可以使用padding属性，也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下、左内边框的大小。 元素的内边距在边框与元素内容之间的空白区域，控制该区域最简单的属性是padding属性。CSS padding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。 5．CSS动画属性（Animation） 通过CSS3，我们能够