第14章DIVCSS布局基础.pptVIP

第14章 DIV+CSS布局基础 　　在对CSS技术的基础知识有了一定的掌握后就可以开始 学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来 说就是使用div标签作为容器，使用CSS技术来排布div标签 的布局方法。常用的CSS布局方式有浮动、定位等。 本章是学习CSS技术最重要的一个部分，读者应多实践 本章内各个实例。 本章内容包括： 　　了解DIV+CSS布局的流程 　　学习盒模型以及盒模型的基本元素 　　学习页面元素的布局方式 　　实例制作歌曲专辑列表 　　实例制作给图片加入信息 14.1 初识DIV+CSS布局的流程 本节通过分析一 个企业主页的排 布方式来讲解初 步了解DIV+CSS 布局的方法。该 网页的效果图显 示如图所示。 14.2 了解盒模型 　　盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局 必需了解盒模型的原理。在页面上的每个元素都能看做一个 容器，这个容器就是一个盒子。例如，p标签是一个能装文 字的容器，它的高度就是所承载文字的高度。使用 DIV+CSS布局，div标签就是布局中所用到的容器。大部分 人认为只有div标签能作为容器来安排布局。其实在XHTML 页面中几乎所用的标签都是容器，都能被当作容器来使用。 页面上的每个容器都占有一定的位置，有一定的大小。页面 上的每个容器都会影响其他容器的排布，它们相互作用，而 形成一个页面的布局。 14.2.1 div标签的盒模型例子 　　以下以div标签的盒模型为例子，讲述基本盒模型的基 本概念。【示例】本例子讲述基本盒模型的概念。 14.2.2 基本盒模型 　　下图所示为基本盒模型。在页面中的所有元素都遵 循该模型的设置方式。 14.2.3 边距 　　边距用于设置页面元素与其它元素的距离。CSS的 margin属性用于设置边距距离。 1．用长度单位设定margin的值 例14-3 2．用百分比设定margin的值 例14-4 3．边距值的缩写: 如果提供全部四个参数值，将按上－右－下－左的顺 序作用于四边。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上－下，第二个用于左－ 右。 如果提供三个，第一个用于上，第二个用于左－右， 第三个用于下。例14-5 4．单边距值：margin-top 、margin-right 、margin-bottom 、margin-left 5．边距重叠 例14-6 注：在边距重叠时，会淘汰边距较小的一个。边距重叠 只发生在边距属性中，补白和边框都不会出现重叠现象。 14.2.4 补白 　　补白用于增加页面元素边框与内容之间的空间。CSS的 padding属性用于设置补白。 1．用长度单位设定padding的值 例14-7 2．用百分比设定padding的值，其计算标准是以该元素的父元素宽高为基准。 例14-8 3.补白值的缩写： 如果提供全部四个参数值，将按上－右－下－左的顺序 作用于四边。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用 于下。 4.单补白值：padding-top 、padding-right 、padding-bottom 、padding-left 14.2.5 边框 　　边框是页面元素可视范围的最外圈。边框包围的范围包 括页面元素的补白和内容。CSS中提供以下三个设置边框的 属性： 1．边框样式border-style 参数： none : 　无边框。与任何指定的border-width值无关 hidden : 　隐藏边框。IE不支持 dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 　实线边框 double : 　双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 　根据border-color的值画3D凹槽 ridge : 　根据border-color的值画菱形边框 inset : 　根据border-color的值画3D凹边 outset : 　根据border-color的值画3D凸边 border-style也包括border-top-style 、border-right-style 、 border-bottom-style 、bo