第19css与页面布局.ppt

第19章 CSS与页面布局 使用CSS布局页面和传统的使用表格布局页面有很大的区别。使用CSS布局页面时，要注意很多问题，例如元素的居中问题、图文混排问题、元素的浮动问题、宽度的计算问题、高度的扩展问题等。下面详细讲解使用CSS进行页面布局的知识。 19.1 CSS页面布局简介 本节主要讲解使用CSS布局页面的基础知识，其中包括CSS布局页面的优点、CSS页面布局的基本思想等。 19.1.1 CSS布局页面的优点 1．网站浏览者的好处 由于页面代码量减少，文件下载速度更快。同时，浏览器显示页面的速度也更快。 由于清晰的语义结构，使得内容能被更多的用户（包括部分残障人士）所访问。 由于实现了结构和表现相分离，内容能被更多的设备（包括手机、打印机等）所访问。 由于样式文件的独立性，用户选择自己喜欢的界面变得更容易。 19.1.1 CSS布局页面的优点 2．网站拥有者的好处 由于代码变得更简洁和组件用得更少，使得维护变得很容易。 由于对带宽要求的降低，节约了成本。 由于页面结构清晰的语义性，使得搜索引擎的搜索变得更容易。 19.1.2 CSS布局页面的基本思想 CSS布局页面的基本思想，就是实现网页结构和表现相分离。 内容、结构和表现是一个网页必不可少的组成部分，其中内容是页面传达信息的基础，表现使得内容的传达变得更加明晰和方便，而结构则是内容和表现之间的纽带，内容、结构和表现的具体含义如下所示。 内容：是指网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。 19.2 定义文档结构 在W3C推荐的Web标准中，推荐使用过渡的XHTML文档作为CSS布局页面的文档，具体操作如下所示。 19.3 CSS样式的优先级 在页面中，定义CSS样式有三种形式：一种为只对该文档的CSS样式；一种为附加的CSS样式；还有一种为使用style属性定义的CSS样式。其中前两种定义CSS样式的方法，在第18章中已经讲解过了。下面讲解使用style属性定义的CSS样式的内容，以及三种方式的优先级。 1．使用style属性定义CSS样式 19.3 CSS样式的优先级 2．CSS样式的优先级 19.4 页面属性与CSS样式 在文档中，页面属性的部分参数，会使用CSS样式进行定义，其中包括外观、标题、链接等选项。页面属性的样式会定义在文档的头部，如图 19.5 水平居中 在大多数页面中，页面的内容都居中显示，如果页面中未定义任何属性或添加相应的元素，页面元素就会以页面的左上角为基准显示。下面分别讲解在传统布局和CSS布局中，定义页面元素居中的方法。 19.5.1 传统布局中定义内容水平居中 在传统布局中，一般通过使用center元素定义页面内容水平居中，center元素是由两个部分组成的，分别是开始标签center和结束标签/ center。 在文档中，将开始标签center放在body元素之后，结束标签/ center放在/ body元素之前，这样由center元素包含的内容，将水平居中显示。 19.5.2 使用CSS定义内容水平居中 使用CSS定义内容水平居中有两种方法：一种是使用文本对齐属性；另一种是使用边界属性。下面讲解具体的制作方法。 1．使用文本对齐属性定义居中 19.5.2 使用CSS定义内容水平居中 2．使用边界属性定义居中 使用边界属性定义页面内容水平居中时，要将边界属性定义在需要水平居中的元素之中，具体操作如下所示。 19.6 浮动与清除 在使用CSS布局的页面中，一般不使用AP Div进行页面的布局。多数页面都使用浮动属性进行页面元素的布局。但是不同的浏览器，对浮动的解释并不相同。有时候为了要显示某种效果，还要使用清除浮动属性，使元素某个方向不能含有浮动元素。 19.6.1 浮动元素与固定元素 在CSS布局中，如果为元素定义了浮动属性，元素会从元素所在行中分离出来，在另一个层次中按照浮动的参数显示，而在浮动元素之后的非浮动元素，会忽略浮动元素继续显示，但是IE浏览器和常用的Firefox浏览器对这个属性的解释并不相同。下面通过示例，讲解浮动元素后面含有非浮动元素的显示效果。具体操作如下所示。 19.6.2 两个浮动元素 在CSS布局中，含有浮动属性的元素，会显示在一个相对独立的层次中。所以当两个浮动元素并列在一起时，元素无法重叠显示，后插入的元素会按照前一个元素定义的属性值，显示在相应的位置。具体操作如下所示。 19.6.3 多个浮动元素 在CSS布局中，如果并列插入多个浮动元素，每个后插入的元素的显示位置，要参照前面元素定义的属性值，具体操作如下所示。 19.6.4 浮动元素和父元素 在CSS布局中，如果一个元素中包含浮动元素，在IE浏览器