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

《2015年网页美化与布局电子教案07单元7　网页特效的美化与布局.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元7　网页特效的美化与布局单元7　网页特效的美化与布局将JavaScript程序嵌入HTML文档中，与HTML标签相结合，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效，使页面具有一定的动态效果，能吸引浏览者的眼球，提高页面的观赏性和趣味性。【知识预览】1．CSS框模型（Box）CSS框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS框模型组成结构示意图如图7-1所示，该图中e

2、lement表示网页元素，border表示边框，padding表示内边距，也将其翻译为填充，margin表示外边距，也将其翻译为空白或边界。本书中我们把padding和margin统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。图7-1　CSS框模型组成结构示意图CSS的盒模型由四个区域组成：内容区、内边距区、边框区和外边距区，内边距区域控制边框与内容之间的位置关系，外边距区域控制元素与其他元素之间的距离。内边距、边框和外边距又分为上、右、下、左四个方向，四个方向可以定义为

3、相同的值，也可以分别定义为不同的值或者保留为默认值，CSS盒模型的主要属性如图7-2。默认情况下，当元素包含内容后，width和height会自动调整为内容的宽度和高度。11单元7　网页特效的美化与布局图7-2　CSS盒模型的主要属性CSS盒模型包括六个基本属性，其中width和height属性定义内容区域的宽度和高度，在内容区域的外面包裹了三层“外衣”：padding、border和margin，盒内使用background属性设置padding区域和内容区域的背景。2．CSS边框属性（Bor

4、der和Outline）盒模型的边框也是网页布局的一个重要属性，网页中许多修饰性线条都是由边框来实现的。（1）每个元素都包含四个方向上的边框：border-top、border-right、border-bottom、border-left，可以单独定义它们的属性，也可以使用border属性统一定义边框效果。（2）可以独立定义边框的样式：border-top-style（顶边框样式）、border-right-style（右边框样式）、border-bottom-style（底边框样式）、bor

5、der-left-style（左边框样式），也可以使用border-style（边框样式）属性统一定义边框的样式。（3）可以独立定义边框的宽度：border-top-width（顶边框宽度）、border-right-width（右边框宽度）、border-bottom-width（底边框宽度）、border-left-width（左边框宽度），也可以使用border-width（边框宽度）属性统一定义边框的宽度。（4）可以独立定义边框的颜色：border-top-color（顶边框颜色）、bo

6、rder-right-color（右边框颜色）、border-bottom-color（底边框颜色）、border-left-color（左边框颜色），也可以使用border-color（边框颜色）属性统一定义边框的颜色。（5）内联元素也可以定义边框，但是内联元素的上下边框高度不会影响行高，而且不受段落和行高的约束，内联元素的左右边框宽度会挤占左右相邻文本的位置，而不会压住左右两侧文本。3．CSS外边距属性（Margin）盒模型的外边距是网页布局中一个重要属性，围绕在元素边框的空白区域称为外边距

7、，设置外边距会在元素外创建额外的“空白”。合理地设置外边距可以使网页布局疏密有致，整体上看起来优美得体。设置外边距可以使用margin属性，也可以margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下、左外边距的大小。4．CSS内边距属性（Padding）盒模型的内边距11单元7　网页特效的美化与布局位于元素边框和内容之间，类似于Word文档中的页边距。设置内边框可以使用padding属性，也可以使用padding-top、pad

8、ding-right、padding-bottom、padding-left属性独立设置上、右、下、左内边框的大小。元素的内边距在边框与元素内容之间的空白区域，控制该区域最简单的属性是padding属性。CSSpadding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。5．CSS动画属性（Animation）通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。可