第14章DIVCSS布局基础.pptVIP

第14章 DIV+CSS布局基础;14.1 初识DIV+CSS布局的流程;14.2 了解盒模型;14.2.1 div标签的盒模型例子;14.2.2 基本盒模型;14.2.3 边距;4．单边距值：margin-top 、margin-right 、margin-bottom 、margin-left 5．边距重叠 例14-6 注：在边距重叠时，会淘汰边距较小的一个。边距重叠 只发生在边距属性中，补白和边框都不会出现重叠现象。 ;14.2.4 补白;3.补白值的缩写： 如果提供全部四个参数值，将按上－右－下－左的顺序 作用于四边。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用 于下。 4.单补白值：padding-top 、padding-right 、padding-bottom 、padding-left ;14.2.5 边框;border-style也包括border-top-style 、border-right-style 、 border-bottom-style 、border-left-style 例14-9 2．边框宽度border-width ，在设定边框宽度之前，必须先指定边框的样式。 参数： medium : 　默认宽度thin : 　小于默认宽度thick : 　大于默认宽度length : 　由浮点数字和单位标识符组成的长度值。不可为负值。 例14-10 border-top-width 、border-right-width 、border-bottom-width 、border-left-width ;;14.3 页面元素的布局;14.3.1 块级元素与行内元素;块级元素和行内元素的区别;14.3.2 CSS布局方式：常规流;14.4 CSS布局方式：浮动;14.4.1 两个元素的浮动应用;14.4.2 多个元素的浮动应用;14.4.3 清除浮动;14.4.4 解决火狐的计算高度问题;14.5 CSS布局方式：相对定位;14.5.1 单个元素的相对定位;14.5.2 两个元素的相对定位;14.6 CSS布局方式：绝对定位;14.6.1 单个元素的绝对定位;14.6.2 两个元素的绝对定位;14.7 本章实例一：制作歌曲专辑列表;步骤： 1.新建一个文件夹名为chapter14(实例一)，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。使用定义列表嵌入专辑。实例中有四个专辑，所以整个XHTML文档中插入四个dl标签。由于四个专辑的样式排布是一致的，所以只要制作其中一个专辑，其余复制即可。定义列表包括三个标签，dl、dt、dd。在本实例中，dl标签用于嵌入整个专辑，dt标签用于嵌入专辑图片，dd标签用于嵌入专辑介绍。全部专辑都放入一个名为block的div 标签中。 2.把dt标签设置为左浮动，dt标签就会与dd标签水平排列。 3.要使dt标签中图片居中对齐，还要设置其显示属性为block。;4.设置dd标签中span标签中文字的样式和超链接的样式。由于span标签属于行内元素，要实现span标签的分行，就要将span标签转换为块级元素。 5.将dl标签中的所有内容复制三份，然后换上相应的内容。当四个block容器放在一起，就会因为浮动而产生布局混乱，为了清除浮动，在每个dd标签中加入clear容器。;14.8 本章实例二：给图片加入信息;步骤： 1.新建一个文件夹名为chapter14(实例二)，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。本例有六章图片，每张样式一样，所以先设置第一张图片的样式。使用block容器作为一张图片的父容器，在该容器中有两个div标签作为其子元素。名为picture的子元素用于放置图片，名为descript的子元素用于放置图片信息。设置父元素block的样式，要使父元素的大小和图片大小一致。 2.设置父元素为相对定位，子元素descript为绝对定位。为了使图片信息位于图片的右下角，要设置bottom属性和right属性的值为5px。 3.设置好第一张图片后，就可以复制另外五张图片。在执行该步骤后，图片会垂直排列。要使其沿水平方向排列，就要设置block容器的浮动属性为left。为了消除浮动产生IE6的双倍边距，要设置显示属性为inline 。;14.9 常见面试题;14.10 小结