CSS与页面布局.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样式的优先级,2CSS样式的优先级,19.4 页面属性与CSS样式,在文档中，页面属性的部分参数，会使用CSS样式进行定义，其中包括外观、标题、链接等选项。页面属性的样式会定义在文档的头部，如图,19.5 水平居中,在大多数页面中，页面的内容都居中显示，如果页面中未定义任何属性或添加相应的元素，页面元素就会以页面的左上角为基准显示。下面分别讲解在传统布局和CSS布局中，定义页面元素居中的方法。,19.5.1 传统布局中定义内容水平居中,在传统布局中，一般通过使用元素定义页面内容水平居中，元素是由两个部分组成的，分别是开始标签和结束标签。 在文档中，将开始标签放在元素之后，结束标签放在元素之前，这样由元素包含的内容，将水平居中显示。,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浏览器中，浮动元素会撑开父元素，在Firefox中浮动元素会浮动在父元素上，下面是元素中包含浮动元素的示例，具体操作如下所示。,19.6.5 清除浮动元素,在CSS布局中，如果浮动元素后面紧跟浮动元素，那么浮动元素就会同行显示，直到浮动元素宽度之和超出父元素宽度为止。如果在浮动元素后面紧跟固定元素，或者浮动元素包含在父元素之中，则在IE浏览器和Firefox浏览器中会显示不同的效果。使用清除浮动属性，可以调整浮动元素的显示效果，具体操作如下所示。,19.7 计算元素的宽度,在使用CSS定义元素的大小时，元素的宽度是由宽度、边框、填充、边界等几个部分组成的，在元素的不同部分中，显示的内容也不同。下面进行详细讲解。,19.7.1 元素宽度的计算,在CSS中所有的文档元素都会生成一个矩形框，这个矩形框由以下几个部分组成：边界、边框、填充、宽度、高度。其具体组成如图所示。,19.7.2 元素各个部分的作用,元素各个部分，包括宽度、高度、边框、填充、边界等，各自显示的内容以及作用各不相同，下面分别进行介绍。 宽度和高度：在宽度和高度构成的矩形框中，显示的是元素的内容部分。其中包括文本、图像、视频等内容。 填充：是内容与边框之间的部分，显示元素的背景颜色或者背景图像。,19.7.3 嵌套元素之间的距离,嵌套元素，当同时定义父元素的“填充”属性，同时定义了子元素的“边界”属性时，两个元素边框间的距离和两个元素是否定义了大小有关，下面分别进行介绍。 1元素未定义大小 在父元素和子元素中定义“边框”样式，如图所示。,19.7.3 嵌套元素之间的距离,2定义子元素的宽度 在子元素中定义“方框”样式，如图所示。,19.7.3 嵌套元素之间的距离,3定义子元素的宽度同时定义父元素的宽度,19.8 自适应的问题,自适应的问题分为两个方面：一方面是水平自适应；另一方面是垂直自适应。水平自适应要涉及到很多具体的因素，使用得较少；垂直自适应在动态页面中经常用到，下面进行详细讲解。,19.8.1 什么叫自适应,自适应主要指的是自适应浏览器不同的分辨率、自适应高度、自适应宽度。其中，当自适应浏览器的分辨率不同时，主要使用百分比来布局。由于使用的技巧和要注意的问题都比较复杂，本书将不做讲解。下面讲解自适应高度的问题。 自适应高度的意思是元素随着内容的增加而自动增高（包括元素之间的互相影响的适应问题）。例如其中一个元素中的内容增加，另一个元素的背景也随之增加。,19.8.2 水平自适应,实现水平自适应主要有两种方法：一种是使用宽度值定义百分比的方法；另一种是使用水平方向上绝对定位的方法。下面分别讲解。 1采用百分比布局,19.8.2 水平自适应,2采用绝对定位布局 采用绝对定位可以使元素固定在浏览器窗口的某个位置。所以，可以通过绝对定位的方法固定各列元素。下面是使用绝对定位布局的示例，具体操作如下所示。,19.8.3 两列的垂直自适应,两列的垂直自适应主要分为两种情况：一种是其中一列中内容固定；另一种是两列中任何一列的内容都不固定。下面分别讲解。 1一列内容固定的自适应,19.8.3 两列的垂直自适应,2两列完全自适应 并列的两列中，背景不同，同时每一列的内容也不固定。可以在嵌套的Div标签中使用负的边界值来实现，具体操作如下所示。,19.8.4 三列完全垂直自适应,三列完全垂直自适应是指任何一列的内容都不固定，同时三列内容有各自不同的背景的情况。,19.8.5 使用背景图像的垂直自适应,如果在元素中使用背景图像，可以很简单地完成高度上的自适应，具体操作如下所示。,19.9 浏览器和兼容问题,浏览器及兼容问题是使用CSS布局时经常遇到的问题，其主要原因是各种浏览器对CSS的支持程度不同，同时每种浏览器又有其自身特有的处理方法，所以如果要使制作的网页能兼容各种浏览器，就要了解各个浏览器的特性，同时会使用一定的技巧。,19.9.1 各种浏览器简介,现在用来浏览网页的浏览器有很多种，其中使用得比较多的是IE浏览器、Firefox浏览器等。同时还有Netscape和Opera等其他的浏览器。下面分别进行简单介绍。 1IE浏览器 IE浏览器全称是Internet Explorer，是微软公司发布的免费浏览器。由于直接绑定在Windows操作系统之中，所以无须下载安装。由于发布的先后不同，有IE 4.0/5.0/5.5/6.0等很多版本，目前最新的是IE 7.0版本。,19.9.1 各种浏览器简介,2Firefox浏览器 Firefox浏览器又称为火狐浏览器，是Mozilla基金会与众多志愿者所开发的，现在也有很多的使用者。,19.9.1 各种浏览器简介,3Netscape Navigator网景浏览器 网景浏览器是Netscape通信公司开发的浏览器，提供了在不同操作系统中使用的免费版本，在Unix用户群中的使用率较高。,19.9.1 各种浏览器简介,4Opera浏览器 Opera浏览器是由Opera Software ASA出品的一款网络浏览器。同时支持Windows、移动电话等很多平台，同时也支持中文、英文等很多语言。,19.9.2 兼容浏览器的原则,各种浏览器在广大用户中的使用率并不相同，同时每个站点面对的浏览群体也存在差别，所以兼容的问题也会比较复杂。总体来讲，关于页面要兼容哪些浏览器的问题，主要遵循以下几个原则。 1使用者的需要,19.9.3 解决兼容问题的原理,由于CSS样式以及页面各种元素在不同浏览器中的表现不同，解决兼容性问题一般可以遵循以下两个原理。 1使用CSS hack,19.9.3 解决兼容问题的原理,2尽量使用兼容属性 因为并不是所有的CSS属性都存在兼容的问题，所以如果使用所有浏览器都能理解一致的属性，那么兼容的问题也就不存在了。 但是如果要实现这样的兼容要考虑的因素相应的会更多。因为每增加一种要兼