第八章CSSDIV布局.ppt

CSS+DIV布局,第八章,相关回顾,有哪3种引入css样式表的方式？1)外部样式表2)内嵌样式表3)内联样式表,相关回顾,样式表中有哪些选择器？元素选择器ID选择器类选择器,预习检查,1、Web2.0标准分为哪三个方面？2、DIV中的定位方式有哪几种？3、设置和清除DIV浮动分别使用什么属性？,结构标准、表现标准、行为标准,绝对定位(position=“absolute”)、相对定位(position=“relative”)、固定定位(position=“fixed”),float:设置DIV浮动方式 clear:清除DIV浮动,预习检查,4、盒子模型的有那些属性？5、常见的网页布局有哪些？,内容（content）、填充（padding）、边框（border）和边界（margin）这些属性称为盒子模型。,1、一列固定宽度2、一列宽度自动适应3、一列固定宽度居中4、二列固定宽度5、二列宽度自动适应6、二列左列固定右列宽度自适应7、二列固定宽度居中8、三列浮动中间列宽度自动适应,本章任务,DIV的各种定位方式 DIV的浮动,绝对定位,相对定位,固定定位,左浮动,本章任务,用CSS+DIV的布局完成如图功能,本章目标,了解什么是Web标准 了解Web2.0标准的构成 掌握DIV三种定位方式 掌握DIV浮动的使用了解什么是盒模型掌握常见的网页布局方式,9,structure（strkt结构,构造）：_presentation（prezntein呈现；显示）：_behavior（bhevj行为,举止）：_extensible（ikstensib()l可展开的,可扩张的）：_document（dkjumnt文档，文件）：_object（bdikt实体，实物）：_model（mdl模型）：_position（pzin方位,位置）：_absolute（bslu:t绝对的,完全的）：_relative（reltiv相对的;比较的）：_fixed（fkst固定的）：_both（bu二者）：_,本章单词,什么是Web标准,Web标准，即网站标准目前通常所说的Web标准一般指网站建设采用基于XHTML的网站设计语言，Web标准中典型的应用模式是“CSS+DIV”Web标准不是某一个标准，而是一系列标准的集合,Web2.0标准的构成,网页的构成网页 人数据(Data)结构(Structure)表现(Presentation)行为(Behavior)网页的标准主要分为三个部分结构标准语言表现标准语言行为标准语言,肉,骨架,漂亮的衣服,走路、吃饭、睡觉,W3C,W3C：(World wide Web)国际万维网联盟。Web2.0标准大部分由W3C起草和发布。值得一体的是，该组织并非官方组织，而是一个民间组织，但由于其制定的标准已经被广大的软件生产厂商以及程序员所接受和认可，顾其在软件行业中有着极为重要的影响力。目前，W3C组织的许多标准已经成为事实上的标准 ECMA：(European Computer Manufacturers Association)欧洲计算机制造协会。ECMAScript是其制定的一项标准,结构标准语言,结构标准语言包括：XML、XHTMLXMLXML:The Extensible Markup Language,可扩展标记语言XML和HTML一样，同样属于标记语言家族中的一员，都是来源于SGML(Standard Generalized Markup Language标准通用标记语言)虽然与HTML一样同属标记语言，但XML在语法上的限制要比HTML严格得多对于编程来讲，XML目前主要的应用有两个方面：作为配置文件和数据交换 XML的特点：跨语言、跨平台、跨数据库、跨设备,结构标准语言,XHTMLXHTML:The Extensible HyperText Markup Language,可扩展超文本标记语言 虽然XML功能强大，但是目前已经有成千上万的网站是基于HTML的，直接使用XML作为站点的标记语言还为时过早，因此在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML 简单的讲，建立XHTML的目的是为了实现HTML向XML的平滑过渡 XHTML既具备HTML的简单易用性，同时具备和XML一样的语法上的严格限制,结构标准语言,DHTMLDHTML:Dynamic HyperText Markup Language,动态网页技术 DHTML并不是一种新的技术，它指的是对HTML、CSS、JavaScript的综合应用,表现标准语言,CSSCSS:Cascading Style Sheets,层叠样式表 CSS主要用于控制网页元素的显示外观，比如字号大小、文本对齐方式、字体设置、网页背景、元素间距等等 Web2.0中使用CSS+DIV的方式进行网页布局，由此取代传统的使用表格布局,行为标准语言,DOMDOM:Document Object Model,文档对象模型DOM是一种与浏览器、平台和语言无关的应用编程接口(API)DOM中提供了相关方法和属性，用于针对标记语言中的节点进行各种操作(添加、删除、修改节点，检索节点信息等),小结1,网页结构主要由三部分组成：结构、表现、行为结构标准语言主要有：XML、XHTMLXHTML是一种用于从HTML向XML过渡的语言表现标准语言主要有：CSS行为标准语言主要有：javascript,认识DIV,几乎XHTML中的任何标签都可以使用浮动与定位，而DIV是使用最为普通的一种DIV与其他XHTML标签一样，也是一个XHTML所支持的标签在使用DIV时，以这样的形式出现可以将DIV看成一个容器，用于定位或者存放具体的页面内容：例如，内容DIV是XHTML中指定的专门用于布局设计的内容对象默认情况下每个div单独占据一行,DIV的三种定位方式,DIV的三种定位方式包括绝对定位相对定位固定定位,DIV的绝对定位,position:absolute;表示绝对定位 如果对容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象的左上角，并且是浮动在正常元素之上的，也就是div会脱离正常的文档流；定位的方法为在CSS中设置容器的top、bottom、left、right的值，这4个值参照的对象是浏览器的上、下、左、右四条边；当你需要将某个元素定位在浏览器内容区的某个地方就可以用到这种定位方式 当有多个绝对定位容器在同一个位置时，只会显示最上面的容器，div的z-index属性值越大，容器越靠上 当容器都没有设置z-index属性值时，默认靠后的容器的z-index值大于前面的容器的z-index值 可以通过为每个固定定位的容器指定z-index值改变它们的在z方向上的层叠顺序,DIV的相对定位,position:relative;表示相对定位使用相对定位的时候，无论是否进行了移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。被设置了这个属性的DIV在所属的范围内(相对于原来的位置)可以进行上下左右的移 示例：,#bobaiyouposition:relative;left:20px;top:20px;,DIV的固定定位,position:fixed;表示固定定位固定定位的容器不会随着滚动条的拖动而变化位置 IE7和更低版本的IE浏览器不支持固定定位，Firefox浏览器支持固定定位,何时选用绝对与相对定位,绝对定位用于网页位置全部固定，而且不希望采用margin、padding和border等属性进行控制一般在以下情况下可能会用到绝对或者相对定位不规则网页设计：有些网页设计不走分栏或块状布局路线，而是随机地布置位置在画面上的设计：门户网站中出现的疯狂广告交互式设计：下拉菜单、右键菜单,小结2,DIV的三种主要定位方式是什么，分别用什么属性值表示？,绝对定位，position:absolute,相对定位，position:relative,固定定位，position:fixed,DIV的浮动,浮动是CSS布局中的重要理论，在实际应用中，大部分都是采用浮动来达到分栏的效果CSS网页布局只能以两种方式存在：1.定位布局 2.浮动布局定位布局和浮动布局的核心都脱离于文档流的控制文档流是浏览器解析网页的一个重要概念对于一个XHTML页面，包含在body标签里的任何元素，根据其前后顺序，自上而下，并在每行中按从左至右的顺序排放元素，即为文档流文档流是浏览器的默认显示规则,DIV的浮动,默认情况下，每个div单独占据一行，不管div的宽度是多大如果想将多个div排在同一行中，就可以使用div的浮动方式div的浮动方式分为：左浮动(float:left)、右浮动(float:right)、无浮动(float:none)float:none是默认的浮动方式,div border:1px solid#00F;#img width:100px;height:100px;margin:2px;#div1,#div2 width:300px;height:90px;margin:2px;#img,#div1 float:left;图片文本段落1文本段落2,浮动的清除,为了更加灵活地定位div元素，CSS提供了clear(清除)属性clear属性的取值有：left、right、both、none，默认值为none当多个块状元素由于第1个设置浮动属性而并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性,div border:1px solid#00F;#img width:100px;height:100px;margin:2px;#div1,#div2 width:300px;height:90px;margin:2px;#img,#div1 float:left;#div2clear:left图片文本段落1文本段落2,小结3,DIV的浮动使用哪个属性，取值有哪些？清除DIV的浮动使用哪个属性，取值有哪些？,float，可以取值：left,right,none,clear，可以取值：left,right,both,none,常见的网页布局,1、一列固定宽度2、一列宽度自动适应3、一列固定宽度居中4、二列固定宽度5、二列宽度自动适应6、二列左列固定右列宽度自适应7、二列固定宽度居中8、三列中间列宽度自动适应,常见的网页布局,1、一列固定宽度:一列式布局是一种固定宽度的布局样式，XHTML代码相当简单，我们只需要编写一个DIV。,一列定宽度#layout border:2px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;width:300px;,一列宽度自动适应,自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览窗口的大小自动改变其宽度和高度的值，是一种非常灵活的布局方式。以百分比的形式,#layout border:2px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:80%;,一列固定宽度居中,.页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align=“center”属性实现。Div本身也align=“center”也可以让Div呈现居中状态。,#layout border:2px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:300px;margin:0px auto;,二列固定宽度,.有了一列固定宽度作为基础，实现两个列的固定宽度。,左列右列#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:300px;float:left;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;Width:300px;float:left;,二列宽度自动适应,.就是使左右栏宽度能够做到自适应。设置自适应主要通过设置宽度的百分比。,左列右列#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:20%;float:left;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;Width:70%;float:left;,二列左列固定右列宽度自适应,.就使左栏固定宽度，右栏根据浏览窗口大小自动适应。右栏不设置任何宽度值，并且右栏不浮动。,左列右列#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:200px;float:left;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;,二列固定宽度居中,.使两个固定宽度的DIV居中，外面要用到设置居中的父容器。,左列右列#layout width:404px;margin:0px auto;#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:300px;float:left;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;Width:300px;float:left;,三列中间列宽度自动适应,.三列式布局：其中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和 右栏的中间，根据左右栏的间距变化自动适应。,左列中间列右列#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:400px;Width:200px;top:0px;left:0px;position:absolute;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;Width:200px;top:0px;right:0px;position:absolute;#Centerborder:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:400px;margin-right:202px;Margin-left:202px;,小结4,左列右列#layout width:404px;margin:0px auto;#left border:1px soild#A9C9E2;backgroud-color:#E8F5FE;Height:200px;Width:300px;float:left;#right border:1px soild#A9C9E2;backgroudcolor:#E8F5FE;Height:200px;Width:300px;float:left;,下面的样式代码是种什么布局,CSS+DIV布局实例,结合前面所学的布局示例，来完成一个三行三列的网页布局结构,总结,网页主要由哪些部分组成？网页主要由结构(Structure)、表现(Presentation)和行为(Behavior)三部分组成当position属性值为absolute时，进行绝对定位当position属性值为relative时，进行相对定位当position属性值为fixed时，进行固定定位使用float属性进行浮动定位使用clear属性清除浮动,总结,常用的布局结构有哪些？一列固定宽度、一列宽度自动适应和一列固定宽度居中布局结构二列固定宽度、二列宽度自动适应、二列左列固定、右列宽度自适应和二列固定宽度居中布局结构。三列浮动中间列宽度自动适应布局结构。,