(精)第14章 DIV+CSS布局基础.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 页面中几乎所用的标签都是容器，都能被当作容器来使用。 页面上的每个容器都占有一定的位置，有一定的大小。页面 上的每个容器都会影响其他容器的排布，它们相互作用