《CSS与页面布局》PPT课件.ppt

第19章CSS与页面布局的知识 使用CSS布局页面和传统的使用表格布局页面有很大的区别 使用CSS布局页面时 要注意很多问题 例如元素的居中问题 图文混排问题 元素的浮动问题 宽度的计算问题 高度的扩展问题等 下面详细讲解使用CSS进行页面布局的知识 19 1CSS页面布局简介 本节主要讲解使用CSS布局页面的基础知识 其中包括CSS布局页面的优点 CSS页面布局的基本思想等 19 1 1CSS布局页面的优点 1 网站浏览者的好处由于页面代码量减少 文件下载速度更快 同时 浏览器显示页面的速度也更快 由于清晰的语义结构 使得内容能被更多的用户 包括部分残障人士 所访问 由于实现了结构和表现相分离 内容能被更多的设备 包括手机 打印机等 所访问 由于样式文件的独立性 用户选择自己喜欢的界面变得更容易 19 1 1CSS布局页面的优点 2 网站拥有者的好处由于代码变得更简洁和组件用得更少 使得维护变得很容易 由于对带宽要求的降低 节约了成本 由于页面结构清晰的语义性 使得搜索引擎的搜索变得更容易 19 1 2CSS布局页面的基本思想 CSS布局页面的基本思想 就是实现网页结构和表现相分离 内容 结构和表现是一个网页必不可少的组成部分 其中内容是页面传达信息的基础 表现使得内容的传达变得更加明晰和方便 而结构则是内容和表现之间的纽带 内容 结构和表现的具体含义如下所示 内容 是指网页实际要传达的信息 包括文本 图片 音乐 视频 数据 文档等 其中不包括修饰的图片 背景音乐等 19 2定义文档结构 在W3C推荐的Web标准中 推荐使用过渡的XHTML文档作为CSS布局页面的文档 具体操作如下所示 19 3CSS样式的优先级 在页面中 定义CSS样式有三种形式 一种为只对该文档的CSS样式 一种为附加的CSS样式 还有一种为使用style属性定义的CSS样式 其中前两种定义CSS样式的方法 在第18章中已经讲解过了 下面讲解使用style属性定义的CSS样式的内容 以及三种方式的优先级 1 使用style属性定义CSS样式 19 3CSS样式的优先级 2 CSS样式的优先级 19 4页面属性与CSS样式 在文档中 页面属性的部分参数 会使用CSS样式进行定义 其中包括外观 标题 链接等选项 页面属性的样式会定义在文档的头部 如图 19 5水平居中 在大多数页面中 页面的内容都居中显示 如果页面中未定义任何属性或添加相应的元素 页面元素就会以页面的左上角为基准显示 下面分别讲解在传统布局和CSS布局中 定义页面元素居中的方法 19 5 1传统布局中定义内容水平居中 在传统布局中 一般通过使用元素定义页面内容水平居中 元素是由两个部分组成的 分别是开始标签和结束标签 在文档中 将开始标签放在元素之后 结束标签放在元素之前 这样由元素包含的内容 将水平居中显示 19 5 2使用CSS定义内容水平居中 使用CSS定义内容水平居中有两种方法 一种是使用文本对齐属性 另一种是使用边界属性 下面讲解具体的制作方法 1 使用文本对齐属性定义居中 19 5 2使用CSS定义内容水平居中 2 使用边界属性定义居中使用边界属性定义页面内容水平居中时 要将边界属性定义在需要水平居中的元素之中 具体操作如下所示 19 6浮动与清除 在使用CSS布局的页面中 一般不使用APDiv进行页面的布局 多数页面都使用浮动属性进行页面元素的布局 但是不同的浏览器 对浮动的解释并不相同 有时候为了要显示某种效果 还要使用清除浮动属性 使元素某个方向不能含有浮动元素 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等其他的浏览器 下面分别进行简单介绍 1 IE浏览器IE浏览器全称是InternetExplorer 是微软公司发布的免费浏览器 由于直接绑定在Windows操作系统之中 所以无须下载安装 由于发布的先后不同 有IE4 0 5 0 5 5 6 0等很多版本 目前最新的是IE7 0版本 19 9 1各种浏览器简介 2 Firefox浏览器Firefox浏览器又称为火狐浏览器 是Mozilla基金会与众多志愿者所开发的 现在也有很多的使用者 19 9 1各种浏览器简介 3 NetscapeNavigator网景浏览器网景浏览器是Netscape通信公司开发的浏览器 提供了在不同操作系统中使用的免费版本 在Unix用户群中的使用率较高 19 9 1各种浏览器简介 4 Opera浏览器Opera浏览器是由OperaSoftwareASA出品的一款网络浏览器 同时支持Windows 移动电话等很多平台 同时也支持中文 英文等很多语言 19 9 2兼容浏览器的原则 各种浏览器在广大用户中的使用率并不相同 同时每个站点面对的浏览群体也存在差别 所以兼容的问题也会比较复杂 总体来讲 关于页面要兼容哪些浏览器的问题 主要遵循以下几个原则 1 使用者的需要 19 9 3解决兼容问题的原理 由于CSS样式以及页面各种元素在不同浏览器中的表现不同 解决兼容性问题一般可以遵循以下两个原理 1 使用CSShack 19 9 3解决兼容问题的原理 2 尽量使用兼容属性因为并不是所有的CSS属性都存在兼容的问题 所以如果使用所有浏览器都能理解一致的属性 那么兼容的问题也就不存在了 但是如果要实现这样的兼容要考虑的因素相应的会更多 因为每增加一种要兼容的浏览器 就会有一部分CSS属性的使用受到限制 也就是说兼容的浏览器越多 能够使用的CSS属性就越少 19 10专家总结 使用CSS样式表对网页进行布局 已经被广大网页制作者所接受 同时其优点也变得日益突出 在使用CSS样式表对网页进行布局的时候 首先要分清页面的结构部分和表现部分 将网页中所有的表现效果均定义在CSS样式文件之中 以便于页面显示效果的修改 在制作页面的同时 还要考虑布局在各种浏览器中的显示效果 尽量做到在各种浏览器中正常显示