第八章CSSDIV布局课件.ppt

CSS+DIV布局
第八章
第1页，共43页。
相关回顾
有哪3种引入css样式表的方式？
1)外部样式表
<link rel="stylesheet" type="text/css" href="" />
2)内成为事实上的标准
ECMA：(European Computer Manufacturers Association)欧洲计算机制造协会。ECMAScript是其制定的一项标准
第12页，共43页。
结构标准语言
结构标准语言包括：XML、XHTML
XML
XML:The Extensible Markup Language,可扩展标记语言
XML和HTML一样，同样属于标记语言家族中的一员，都是来源于SGML(Standard Generalized Markup Language标准通用标记语言)
虽然与HTML一样同属标记语言，但XML在语法上的限制要比HTML严格得多
对于编程来讲，XML目前主要的应用有两个方面：作为配置文件和数据交换
XML的特点：跨语言、跨平台、跨数据库、跨设备
第13页，共43页。
结构标准语言
XHTML
XHTML:The Extensible HyperText Markup Language,可扩展超文本标记语言
虽然XML功能强大，但是目前已经有成千上万的网站是基于HTML的，直接使用XML作为站点的标记语言还为时过早，，用XML的规则对其进行扩展，得到了XHTML
简单的讲，建立XHTML的目的是为了实现HTML向XML的平滑过渡
XHTML既具备HTML的简单易用性，同时具备和XML一样的语法上的严格限制
第14页，共43页。
结构标准语言
DHTML
DHTML:Dynamic HyperText Markup Language,动态网页技术
DHTML并不是一种新的技术，它指的是对HTML、CSS、JavaScript的综合应用
第15页，共43页。
表现标准语言
CSS
CSS: Cascading Style Sheets, 层叠样式表
CSS主要用于控制网页元素的显示外观，比如字号大小、文本对齐方式、字体设置、网页背景、元素间距等等
+DIV的方式进行网页布局，由此取代传统的使用表格布局
第16页，共43页。
行为标准语言
DOM
DOM: Document Object Model, 文档对象模型
DOM是一种与浏览器、平台和语言无关的应用编程接口(API)
DOM中提供了相关方法和属性，用于针对标记语言中的节点进行各种操作(添加、删除、修改节点，检索节点信息等)
第17页，共43页。
小结1
网页结构主要由三部分组成：结构、表现、行为
结构标准语言主要有：XML、XHTML
XHTML是一种用于从HTML向XML过渡的语言
表现标准语言主要有：CSS
行为标准语言主要有：javascript
第18页，共43页。
认识DIV
几乎XHTML中的任何标签都可以使用浮动与定位，而DIV是使用最为普通的一种
DIV与其他XHTML标签一样，也是一个XHTML所支持的标签
在使用DIV时，以<div></div>这样的形式出现
可以将DIV看成一个容器，用于定位或者存放具体的页面内容：例如，<div>内容</div>
DIV是XHTML中指定的专门用于布局设计的内容对象
默认情况下每个div单独占据一行
第19页，共43页。
DIV的三种定位方式
DIV的三种定位方式包括
绝对定位
相对定位
固定定位
第20页，共43页。
DIV的绝对定位
position:absolute; 表示绝对定位
如果对容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象的左上角，并且是浮动在正常元素之上的，也就是div会脱离正常的文档流；定位的方法为在CSS中设置容器的top、bottom、left、right的值，这4个值参照的对象是浏览器的上、下、左、右四条边；当你需要将某个元素定位在浏览器内容区的某个地方就可以用到这种定位方式
当有多个绝对定位容器在同一个位置时，只会显示最上面的容器，div的z-index属性值越大，容器越靠上
当容器都没有设置z-index属性值时，默认靠后的容器的z-index值大于前面的容器的z-index值
可以通过为每个固定定位的容器指定z-index值改变它们的在z方向上的层叠顺序
第21页，共43页。
DIV的相对定位
position: relative; 表示相对定位
使用相对定位的时候，无论是否进行了移动，元素依然占据原来的空间。因此，移动元