第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页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，而形成一个页面的布局。 14.2.1 div标签的盒模型例子 以下以div标签