第5讲 网页制作(二)(2010PPT)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,.,NET,主讲教师,:,e-mail:,手机：,第,5,讲 网页制作（二）,CSS,网页布局与样式,CSS,，,Cascading style sheet,，层叠样式表，是为了弥补,HTML,在布局和样式方面的不足而产生的,。,在,XHTML,网页中，通常用,CSS,对页面整体,布局和样式控制。,从本讲开始，本课将介绍,CSS,在样式和布局方面的相关知识。,第,5,讲,网页制作,（二）,CSS,网页布局与样式,5,.1div,标记和,span,标记,5,.2CSS,的概念,5,.3CSS,的声明方法,5,.4CSS,的基本语法,5,.5CSS,的颜色和数值单位,5,.6Div+CSS,布局,5,.7,CSS,盒模型,5,.8,元素的非常规定位,方式,5.9,使用,CSS,制作,背景,5.10,综合实例解析,5,.1,div,标记和,span,标记,div,标记和,span,标记都是,CSS,中最重要的标记。,div,标记,div,标记是一个块状元素,，其实就是一个大容器，,可以,包含任何标记,，如段落、标题、文本、表格等，也可以嵌套使用。,div,的一般使用方法如下：,内容,例如：,div,标记,div,标记是一个块状元素。,div,的并列与嵌套,div,可以多层进行嵌套使用。,嵌套的目的是为了实现更多复杂的页面排版。,例如，当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部，代码如下：,顶部,列表,内容,底部,span,标记,span,标记,是内,联,元素,，,只能,容纳文本和其它内联元素，可与其它内联元素位于同一行，宽度和高度不起作用,。一行,内可以被,span,划分成好几个区域，从而实现某种特定效果。,span,标记的使用方法如下：,内容,span,与,div,的区别,div,是一个块级元素,(,大容器,),，可以包含段落、标题、表格等其他元素，有固定的,宽度和高度。,span,是一,个内联元素,(,小容器,),，一行内的内容可以,被,span,划分成好几个,区域，,span,没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。,如,:,This is crazy,5,.2CSS,的概念,认识层叠样式表,(CSS),层叠样式表所提供的样式,CSS,布局与表格布局的分析,感性体验,CSS,的魅力,认识层叠样式表,(CSS),CSS,，,Cascading style sheet,，层叠样式,表，,是为了弥补,HTML,在布局和样式方面的不足而产生的。,CSS,文件，又称为,CSS,样式表，一个文本文件包含了一些,CSS,标记。,只要修改网站的,CSS,样式表，就可以改变整个站点的整体表现形式，大大减少了重复劳动。,CSS,是每一个网页设计人员的必修课。,层叠样式表所提供的样式,字体样式,文字样式,背景样式,区域样式,分类样式,字体样式,字体样式用于设置,HTML,元素的字体、大小、粗细,、常规,/,斜体等样式。如：,font-family,：,字体。,font-size,：,大小。,font-weight,：,粗细。,font-style,：常规,/,斜体。,line-height:,行高，用于设定行间距,单位为,px(,像素,),或,em(,相对于文本的字体尺寸,的,倍数,),。,font,：,font-family,、,font-size,、,font-weight,、,font-style,等样式的综合表示,法。,文字样式,文字样式用于设置字符间距、文字间距、文字的对齐方式、文字效果等。如：,letter-spacing:,字符间距,word-spacing:,文字间距,text-decoration:,指定下划线、顶线、删除线等文字效果。,背景样式,背景样式用于设置背景颜色、背景图片、背景图片是否重复排列等。如：,backgroud-color,：背景颜色,backgroud-image,：背景图片,backgroud-repeat,：背景图片是否重复排列,backgroud:,背景颜色、背景图片、是否重复等背景样式的综合表示法,区域样式,用于,设置区域的高度、宽度、内外边距大小、边框样式等。,如：,margin:,用于指定区域的外边距大小。,height,:,用于指定区域的高,度。,width,:,用于指定区域的,宽度。,border:,指定区域四周的边框粗细、样式及颜色。,padding,：指定区域文字与区域边界的,间距（即内边距）的大小。,分类样式,用于指定,HTML,元素的显示方式,、列表项图片的相关属性等。,如：,display,：用于指定,HTML,元素的显示方式。,list-style-image,：用于,指定列表项图片的文件路径及名称。,list-style-type,：用于,指定列表项符号,或编号。,CSS,布局与表格布局的对比,在传统网页中，常用表格对页面整体进行布局。,示例：,table.htm,在,XHTML,网页中，通常用,CSS,对页面整体布局。,示例：,css.htm,table.htm(1),简单表格布局,顶部,列表,内容,底部,css.htm(1),XHTML+CSS,简单布局,#allwidth:400px,;,margin:0px auto,;,color:#f00; ,#top,#btheight:20px;,width:100,%;,background-color:#ccc;,color,:#00f,;,font-weight:bold,;,#midwidth:100,%;,height:120px,;,#listwidth:25,%;,height:100,%;,float:left;background-color,:#eee;,#contentwidth:75,%;,height:100%;,float:left;background-color,:#f7f7f7;,#bt float:left,;,css.htm(2),顶部,列表,内容,底部,表格布局,表格最初的目的是：显示表格状的数据。,后来，表格被用于网页布局时，设置其,border=,“,0,”,，使得网页设计师可以将图片和文本放在这无形的网格中。,表格布局的主要弊端如下：,表格布局的主要弊端,1,、把样式和内容混合在一起，使得文件的大小无谓变大，减慢速度，浪费用户的流量费用。,2,、重新设计现有的站点和内容代价昂贵。,3,、极难保持整个站点的视觉的一致性，花费也极高。,CSS,布局,为了避免表格网页布局与生俱来的弊端，,CSS,布局应运而生。,利用,CSS,布局，网页设计者可使页面的实际内容与呈现格式的逻辑分离。,CSS,布局的主要优势如下：,CSS,布局的主要优势,1.,一次编写，重复,使用。,2.,把样式和内容分离，内容,简单规范，方便,代码维护。,3.,缩小文件体积，,CSS,文件无需重复下载，增快网络访问速度。,4.,在不改变,HTML,的情况下，可,快速,修改和切换网站的整体设计和风格。,5.,帮助网站保持视觉的一致性。,感性体验,CSS,的魅力,著名的,“,CSS,禅意花园,”,网站（）无疑把,CSS,发挥到了极致。,永远不变的,HTML,文本，仅通过链接数百个不同的,CSS,样式表，就成就了数百个风格迥异而精彩绝伦的网页设计作品。,下面仅仅演示其中的几款经典作品。,没有添加,CSS,的网页效果,添加,CSS,后的网页效果（一）,添加,CSS,后的网页效果（二）,添加,CSS,后的网页效果（三）,CSS,禅意花园的第,1,种风格网页的效果,CSS,禅意花园的第,1,种风格网页的,CSS,源文件,CSS,禅意花园的第,210,种风格网页的效果,CSS,禅意花园的第,210,种风格网页的,CSS,源文件,5,.3,CSS,的声明方法,声明,CSS,通常有,3,种方法，并且这,3,种方法可以混合使用。,(1),行间样式表,(2),内部样式表,(3),外部样式表,(1),行间样式表,行间样式表指,CSS,编写在,XHTML,标签的,style,属性中。,一般格式为：,信息内容,例如：,信息内容,这种方式比较灵活，但样式和内容没有分离，一般不推荐使用。,示例：行间样式表,.htm,行间样式表,.htm,行间样式表,蝶恋花,庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。,宋,欧阳修,注释,1:,章台路意指歌妓聚居之所。,注释,2:,冶游生春露,，,冶游即春游。,(2),内部样式表,这种方式把,CSS,代码集中编写在头部信息的,标签内，很好地做到了样式与内容的分离，使用最为广泛。,一般格式为：,选择符,1,属性,1,:,值,1;,属性,2,:,值,2,选择符,2,属性,1,:,值,1;,属性,2,:,值,2,例如：,p font-family,:,隶书,;font-size:30,;,color:blue,.,note1 color:green,.,note2 color:blue,示例：内部样式表,.htm,内部样式表,.htm,内部样式表,p font-family,:,隶书,p.titlefont-size:30,;,color:blue,p.contentfont-size:20;color:olive,p.authorfont-size:20;color:black,.note1 color:green,.note2 color:red,蝶恋花,庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。,宋,欧阳修,注释,1:,章台路意指歌妓聚居之所。,注释,2:,冶游生春露,，,冶游即春游。,(3),外部样式表,外部样式,表是把,CSS,样式编码单独编写在一个独立的,css,文件中，由网页进行调用。,只要修改网站的外部样式表，就可以改变整个站点的整体表现形式，大大减少了重复劳动。,这种方式是,CSS,应用中最好的一种形式，尤其在大型网站比较多见。,(3),外部样式表,外部样式表中的,css,样式的一般格式为：,选择符,1,属性,1,:,值,1;,属性,2,:,值,2,选择符,2,属性,1,:,值,1;,属性,2,:,值,2,(3),外部样式表,在网页中调用外部样式表有两种格式：,(1) import url(,外部样式表名,.css);,(2),如，假设样式表为,“,style.css,”,有以下两种设置格式：,(1) import url(style.css);,(2),示例：,style.css,、外部样式表,1.htm,、外部样式表,2.htm,style.css,p font-family,:,隶书,p.titlefont-size:30,;,color:blue,p.contentfont-size:20,;,color:olive,p.authorfont-size:20,;,color:black,.note1 color:green,.note2 color:red,外部样式表,1.htm,外部样式表,1,import url(style.css);,蝶恋花,庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。,宋,欧阳修,注释,1:,章台路意指歌妓聚居之所。,注释,2:,冶游生春露,，,冶游即春游。,外部样式表,2.htm,外部样式表,2,蝶恋花,庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。,宋,欧阳修,注释,1:,章台路意指歌妓聚居之所。,注释,2:,冶游生春露,，,冶游即春游。,三种,CSS,声明方法的优先级比较,XHTML,元素被多种,CSS,声明样式时，采取就近原则。,内部样式表的优先性高于外部样式表。,行间样式表的优先性又高于内部样式表。,5,.4CSS,的基本语法,CSS,的属性和选择符,CSS,的各种选择符详解,id,和,class,的区别,CSS,的属性和选择符,CSS,语法的核心三大要素为：,选择符。选择符指,CSS,这段代码所控制的对象，比如,id,、,class,、标签等。,属性。属性则是,CSS,所控制对象的各项样式属性，类型非常多，例如文本颜色、对齐、宽度、高度等。,值。值即为属性所对应的量化或描述设置。例如,font-size,属性值为,12px,、,14px,、,16px,等。,CSS,的属性和选择符,CSS,代码实质上就是选择符、属性和值的代码段组合而成。,CSS,代码编写的格式为：,选择符,属性,1,：值,1,；,属性,2,：值,2,；,属性,n,：值,n;,CSS,的各种选择符详解,CSS,选择符有,5,种，分别是：,标签选择符,id,选择符,class,选择符,伪类选择符,通配选择符,标签选择符,标签选择符，对,XHTML,中已有的标签作选择符进行样式定义，例如：,pcolor:blue;,h1color:red;,示例：,id_class.htm,id,选择符,标签设置了,id,属性,(,唯一标识,),后，就可以通过,id,名称给该标签设置独一无二的样式。,id,名称可自定义，但不能以数字开头，,CSS,代码中引用,id,名称，前面须加上,”,#,”,符号。,例如，,id,名称为,hello,的,div,标签，在,CSS,代码中引用的形式如下：,#,hellocolor:#ff0000;,示例：,id_class.htm,class,选择符,多个标签可使用同一个,class,属性名称，使多个标签拥有统一的样式。,class,名称可自定义，但不能以数字开头，,CSS,代码中引用,class,名称前面须加上点号,“,.,”,。,例如，,class,名称为,reader,的,CSS,代码：,.,readercolor:#ff0000;,示例：,id_class.htm,id_class.htm, css,样式演示,h1color:red;,pcolor:blue;,#hellobackground-color:#ccffff;,width:400px;height:80px;line-height:2em,.readerfont-weight:bold; color,:#ff00ff;,这是,1,号标题的新样式,这是段落的新样式,这是,class,为,reader,的字体样式,这是,id,为,hello,的,div,的样式,页面效果,伪类选择符,伪类及伪对象选择符是一组,CSS,预定义好的类和对象，不需要进行,id,和,class,属性的声明。以超级链接为例：,a:visitedcolor:#ff0000;,以上代码代表页面中的超级链接被访问过后，其样式设置为红色文本。,CSS,常用伪类选择符,伪类选择符,用途,a:link,未访问的超级链接,a:hover,鼠标悬浮在上的超级链接,a:active,选定激活的超级链接,a:visited,已访问的超级链接,示例：伪类选择符,CSS,超链接伪类,a:link color: #FF0000;text-decoration: none /*,未被访问的,链接为红色,*,/,a:visited color: #00FF00;text-decoration: none /*,已被访问过的,链接为绿色,*,/,a:hover color: #FFCC00;text-decoration: underline /*,鼠标悬浮在上的,链接为橙色,*,/,a:active color: #0000FF;text-decoration: underline /*,鼠标点中激活的,链接为蓝色,*,/,我的第一个网页,字体颜色,字体字型的设置,示例：伪类选择符,通配选择符,在,DOS,操作系统中有一,个,*,通配符，,如*,.*,代表任何文件、*,.mp3,代表所有的,mp3,文件。,CSS,中也有*通配选择符，代表所有对象，例如：,*,margin:0px;,以上,CSS,代码代表所有对象的外边距为,0,像素。,组合选择符,选择符还可以互相进行组合，形成新的选择符类型，常用的有,4,种组合方式：,群组选择符,包含选择符,标签指定式选择符,自由组合选择符,群组选择符,即当需要对多个选择符进行相同的样式设置时，可以把多个选择符写在一起，并用逗号分隔，例如：,p,span,div,licolor:#ff0000;,包含选择符,即通过标签的嵌套包含关系组合选择符，包含关系的,2,个选择符用空格分隔，例如：,p spancolor:#ff0000;,以上代码只有,p,标签内的,span,标签所含文本被设置为红色。,标签指定式选择符,即标签选择符和,id,或,class,的组合，两者之间不须分隔，例如：,p#hellocolor:red;,p.readercolor:blue;,以上代码表示,id,名称为,hello,的,p,标签文本为红色，,class,名称为,reader,的,p,标签文本为蓝色。,自由组合选择符,即综合以上的选择符类型自由组合的选择符，例如：,p#hello,spancolor,:#ff0000;,以上代码表示,id,名称为,hello,的,p,标签,内,span,标签,的文本为红色。,选择符综合实例,选择符综合实例,bodyfont-family:,宋体,;,font-size: 12px;,*margin:0px;,h2,pcolor:blue;,p spancolor:#ff00ff;,p#content1color:green;,p.style1color:black;,p#content2 spancolor:red;,猫爱打呼噜 原来是治病,猫在休憩时，喉咙中常会发出呼噜呼噜的声音。有人认为这是猫在,打呼噜，,但科学家却发现这是猫咪自疗的方式之一。,美国北卡罗莱纳州科学家发现，家猫打呼声的频率约在,27,至,44,赫兹，美洲狮、中南美洲豹猫、非洲山猫、印度豹及西南亚野猫等的打呼声频率为,20,至,50,赫兹。,科学家指出，某种频率的音波可以刺激猫科动物医疗骨伤的疗程。猫科动物喉头发出的呼噜声，其疗伤的效用就如同人类置身于超音波下疗伤的效用。以上的发现使得,“,九命怪猫,”,之谜得以破解。,猫从高楼上坠下不死，且迅速复原的例子比比皆是。最近刊载于美洲动物医疗协会杂志中的一份研究报告指出，在调查了,132,宗猫自平均,5.5,层楼高的高度坠下的案例后发现，,90%,都存活下来。,注意：,id,和,class,的区别,同样的,id,名称在页面中只使用一次，可用于页面的布局等应用。,同样的,class,名称可在页面中多次使用，作用于多个对象，以达到统一样式设置的目的，可用于文本颜色等应用。,提示：,id,和,name,的自定义名称大小写敏感，推荐统一使用小写。,5,.5CSS,的颜色和数值单位,CSS,代码中的颜色值和,HTML,中设置略有区别，特殊情况下,CSS,代码中的颜色值可以缩写。,颜色值一般采用,16,进制代码，即,#abcdef,，当,a=b,c=,d,e=f,时，,#abcdef,可缩写为,#ace,，如,#f00,代表红色。,颜色值另一种表示方法为,rgb,方法，红绿蓝三色使用十进制表示或百分比表示，例如：,p#hellocolor:rgb(255,0,0);,p#hellocolor:rgb(100%,0,0);,CSS,中的常用数值单位,单位,说明,示例,px,pixel,像素。屏幕上显示的最小单位，直观方便。像素是相对于显示器屏幕分辨率而言的。,height:500px;,em,即，在CSS中，1em100，是一个比率，,指相对当前元素内文本高度的倍数。,font-size:1.2em;,pt,pt,，点，,又名,“,磅,”,，是一个,标准,的用于印刷的长度单位，1pt,=,1/72英寸,=0.03527,厘米。,font-size:12pt;,5,.6,Div+CSS,布局,XHTML,中的块状元素和内联元素,块状,元素,的高度和宽度的设置,浮动属性,float,闭合浮动,属性,clear,显示属性,display,网页布局实例,XHTML,中的块状元素和内联元素,XHTML,的标签分为,2,种元素：块状元素和内联元素。,块状元素：默认是占据一行的位置，下一个元素将被迫挤到下一行显示。块状元素有固定的高度和宽度。,内联元素：内联元素会使得下一个元素自动贴到自己的右边显示，同一行能容纳多个内联元素。内联元素不能设置高度和宽度,。,块状元素和内联元素,块状,元素和内,联,元素可以相互转化。,块状,元素转化为内联元素：,css,设置,display:inline ;,内,联元素转化为块状元素：,css,设置,display:block ;,常用块状元素,div,层,p -,段落,table -,表格,ol,有序列表,ul,无序列表,h1-h7,七级标题,常用内联元素,span,img -,图片,a -,超级链接,font -,字体设定,b -,粗体,i -,斜体,u -,下划线,块状元素,的高度和宽度的设置,所有的块状元素均是用,width,属性用于,设置宽度，用,height,属性,设置高度,。,width,和,height,属性的可选值有两种：,百分比：基于父对象总高度或宽度的百分比。,长度值：定义一个固定的长度,，,常用,单位是,px,。,示例：,div_2.htm,注：默认情况,下块状元素的宽度为父对象宽度的,100%,，高度,最小并自,适应。,div_2.htm,设置,div,样式,html,bodyheight:100%; ,#fst background-color: #eee;,border:1px solid #000;,width:300px;height:200px;,#sec background-color: #eee;,border:1px solid #000;,width:50%;height:25%;,这是固定尺寸的宽度和高度,这是自适应尺寸的宽度,(50%),和高度,(25%),在不同浏览器中，默认外边距和内边距不一定为,0,，所以在,布局页面前，网页制作者一定要把页面的默认边距清除。,为了方便操作，常用的方法是使用通配选择符*,将所有对象的边距清除，即将,margin(,外边距,),和,padding(,内边距,),置为,0px,。,CSS,代码如下：,*,margin:0px; padding:0px;,布局页面前清除默认边距,浮动属性,float,float,属性,让,设置,的元素产生,浮动效果，就是脱离原来页面的标准输出流,，尽可能（只要空间允许）移动到前一个块级元素的左边,或,右边。,在,CSS,中，任何元素都可以浮动,。,浮动,元素会生成一个块级框，而不论它本身是何种元素。,假如,在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止,。,正常情况下，,HTML,页面中块元素都是从上到下排列的。如果想实现左右结构，,float,是一种选择,。,浮动属性,float,float,属性的值有,left,、,right,、,none,。,float,属性值为,left,时，,元素向左浮动。,float,属性值为,right,时，,元素向右浮动。,float,属性值为,none,时，默认值，元素不浮动。,浮动属性,float,在源代码顺序中，在,float,元素前面的区块级元素不受其影响，但后面的元素将受其影响。,当不需要在,float,元素后面的元素环绕它时，可以设置,clear,属性清除。,示例：,div_float.htm,、,div_float2.htm,div_float.htm,设置,div,浮动,*margin:0px; padding:0px; ,#one width:125px; height:120px;,background-color:#eee; border:1px solid #000;,float:right; ,#two width:200px; height:120px;,background-color:#eee; border:1px solid #000;,float:left; ,第,1,个,div,第,2,个,div,div_float2.htm(1),div,的,float,属性,bodybackground-color: #000000;,#first divfloat: left; margin: 8px; ,#second div,float: right;,margin: 8px;,#first,float:left;,width:300px;,#secondfloat:right;,width:500px; ,div_float2.htm,（,2,）,闭合浮动属性,clear,在设计网页中，经常需要设置多个,div,并列排列，往往使用浮动属性,float:left,或,float:right,来实现。,当前面并列的多个,div,总宽度不足,100%,，下面的,div,就很可能向上提，和上一行并列的,div,在同一行，这不是想要的结果。使用闭合浮动属性,clear,属性正好解决这一问题。,clear,属性设置一个元素的侧面是否允许其他的浮动元素，使得元素的浮动更加灵活。,clear,属性可选值如下：,left,：在左侧不允许浮动元素。,right,：在右侧不允许浮动元素。,both,：在左右两侧均不允许浮动元素。,none,：默认允许浮动元素出现在两侧。,示例：,div_clear,div_clear.htm(1),div,的,clear,属性,body,background-color,: #000000,; ,div,margin: 8px,; ,#first div,float,: left,; ,#clearit, clear:both; ,#second div,float: right,; ,#first,float:left,; width:300px,; ,#second,float:right;width:400px; ,div_clear.htm,（,2,）,显示属性,display,CSS,中的,display,属性可以设置元素的显示方式,。可以通过,display,属性使块状元素和内联元素之间互相转化。,语法格式如下：,display:block|inline|none;,inline,:,默认值，此,元素将显示为内联,元素。,block:,此,元素将显示为块级,元素。,none,:,在浏览器中,将,不显示这个对象。,示例：,div_display,、,div_display2.html,。,div_display.html,display,属性,.set1 display:block; ,.set2 display: inline; ,.set3 display: none; ,块级元素,1,块级元素,2,内联元素,1,内联元素,2,这里的代码将不会显示,div_display2.html(1),display,属性,body background-color:#000000;,divmargin:10px;,.set1 display:block; ,.set2 display: inline; ,.set3 display: none; ,div_display2.html(2),网页布局实例,制作一个比较典型的网页布局实例。,(,示例：,page_div.html),要求：,页面有上下,4,行区域，分别用作顶部广告区、横向导航区、主体区和版权信息区。,主体区分为左右,2,个大区，,左区域用于纵向导航区。,右区域用于主体内容区。,网页布局结构分析图,#left,（左区域）,#right,（右区域）,#footer,（,版权信息区）,#nav,（导航区）,#top,（广告区）,#mid,（主体区）,#all,根据结构分析图编写的部分结构代码,顶部广告区,横向导航区,纵向导航区,内容区,底部版权区,* margin:0px; padding:0px; ,#all,width:500px,;margin:0px auto; ,#top height:80px;background-color:#dddddd; ,#nav height:25px;background-color:#ffcc00; ,#mid,height:300px;,#left,width:20%;,height:100%;,background-color:#dddddd;,float:left,; ,#right,width:80%;height:100%;,background-color:#66FFFF;,float:left;,#footer height:80px; background-color:#ffcc00; ,CSS,样式代码,div_page.html(1),div+css,* margin:0px; padding:0px; ,#allmargin:0px auto; width:,500,px; ,#,top height:80px;background-color:#dddddd; ,#nav height:25px;background-color:#ffcc00; ,#mid,height:300px;,#left,width:20%;,height:100%;,background-color:#dddddd;,float:left,; ,#right,width:80%;height:100%;,background-color:#66FFFF;,float:left;,#footer height:80px; background-color:#ffcc00; ,div_page.html(2),顶部广告区,横向导航区,纵向导航区,内容区,底部版权区,浏览器显示效果,5,.7,CSS,盒模型,5,.7.1,什么是,CSS,盒模型？,5,.7.2,外边距的设置,5,.7.3,边框的样式设置,5,.7.4,内边距的设置,5,.7.1,什么是,CSS,盒模型？,CSS,盒模型是从,CSS,诞生之时便产生的一个概念。,对于网页中的大部分对象,(,不论块状元素还是内联元素,),，实际呈现的形式都是一个盒子形状对象，即块状对象。,在,CSS,设计过程中，要做的就是安排一个个盒子的内容。,盒模型示意图,宽度,(width),包含内容,内边距,（,padding,）,外边距,（,margin,）,边框,（,border,）,高度,(height),CSS,的,margin,、,border,和,padding,均可拆分上、下、左、右,4,部分。,margin,：,margin-top,、,margin-bottom,、,margin-left,、,margin-right,。,border,：,border-top,、,border-bottom,、,border-left,、,border-right,。,padding,：,padding-top,、,padding-bottom,、,padding-left,、,padding-right,。,宽度,(width),包含内容,内边距,（,padding,）,外边距,（,margin,）,边框,（,border,）,高度,(height),盒子实际占据的宽度,=,margin-left,+,padding-left + border-left,+ width + padding-right + border-right + margin-right,盒子实际占据的高度,= margin-top,+ border-top +,padding-top+,height,+,padding-bottom + border-bottom + margin-bottom,5,.7.2,外边距的设置,通常外边距,margin,的,默认值为,0,，但是在不同的浏览器默认值可能不同。,在,CSS,中，,margin,属性可以统一设置，也可以上下左右分开,设置。,margin,属性可以有,1,到,4,个值,。,内边距属性的统一设置的语法结构如下：,margin:,上边,距 右边距 下边距 左边距；,在,margin,属性中，宽度的可选值如下：,长度值：规定以具体单位计的外边距值，比如,像素等。,百分比：,规定基于父元素的,宽度,或高度,的,百分比的外边距,。,auto,：浏览器计算外边距。,示例：,box_margin.htm,margin,属性设置举例,例,1 margin,属性,4,个值,margin:10px 5px 15px 20px;,说明：上外边距是,10px,，右外边距是,5px,下外边距是,15px,，左外边距是,20px,例,2 margin,属性,3,个值,margin:10px 5px 15px;,说明：上外边距是,10px,，右外边距和左外边距是,5px,下外边距是,15px,。,例,3 margin,属性,2,个值,margin:10px auto;,说明：上外边距和下外边距是,10px,，,右外边距和左外边距是,auto,， 左右边距相等，,内容居中,。,例,4 margin,属性,1,个值,margin:10px;,说明：所有,4,个外边距都是,10px,box_margin.htm,（,1,）,外边距设置,bodybackground-color:#cccccc;,* margin: 0px;,#all width:400px;height:400px;,margin:0px auto; background-color:#ff22ee; ,#a,#b,#c,#d,#e,width:150px,; height:50px;,background-color,:#,fff;border,: 2px solid #999; ,#a margin-left:10px; ,#b margin-left:25px; ,#c margin-bottom:10px; margin-top:10px; ,#d margin-top:30px; margin-left:5px; ,box_margin.htm,（,2,）,a,盒子,b,盒子,c,盒子,d,盒子,box_margin.htm,页面效果,5,.7.3,边框的样式设置,边框的,CSS,样式设置不但影响到盒子的尺寸，还影响到盒子的外观，非常重要。,在,CSS,中，边框样式属性,border,可以统一设置，也可以上下左右分开设置。,5,.7.3,边框的样式设置,border,的语法结构如下：,border:,边框宽度 类型 颜色；,“,边框宽度,”,默认,值,为,0px,，,没有边框。,“,类型,”,可以修改成不同样子的边框线条，常用的为：,solid(,实线,),、,dashed(,虚线,),、,dotted(,点状线,),、,groove(,立体线,),等。,比如：,border:2px solid #3effff;,示例：,box_border.htm,box_border.htm,（,1,）,* margin: 5px; ,#all width:400px; height:270px;,margin:0px auto; background-color:#cccccc; ,#a,#b,#c,#d width:180px; height:50px;text-align:center;,line-height:50px;background-color:#eeeeee; ,#aborder:2px solid #3effff; float:left;,#bborder:5px dashed #3effff; float:left;,#cborder:8px dotted #3effff; float:left;,#dborder-top:8px groove #3effff; float:left;,box_border.htm,（,2,）,a,盒子（,solid,类型）,b,盒子（,dashed,类型）,c,盒子（,dotted,类型）,d,盒子（,groove,类型）,5,.7.4,内边距的设置,通常内,边距,padding,的默认值为,0,，但是,在不同的浏览器默认值可能不同。,在,CSS,中，内边距可以统一设置，也可以上下左右分开设置。,内边距属性的统一设置的语法结构如下：,padding:,上边距 右边距 下边距 左边距；,宽度值可为：百分比、长度值、,auto,。,比如，,padding:25px 20px 5px 2px;,示例：,box_padding.htm,box_padding.htm,（,1,）,内边距的设置,* margin: 0px;,#all,margin:0px auto; width:400px;,background-color:#9966FF,#a,#b,#c,#d,#e,#fwidth:160px;,height:30px;border:1px solid #000;,background-color:blue;,pwidth:120px; height:30px;,background-color:#cc9; ,#apadding-left:20px;padding-top:20px;,#bpadding-top:20px;,#cpadding-right:20px;,#dpadding-bottom:20px;,#epadding:20px;,box_padding.htm,（,2,）, a,盒子, , b,盒子, , c,盒子, ,d,盒子, , e,盒子, ,f,盒子,(,无边距,) ,5,.8,元素的非常规定位方式,默认情况下，元素的常规位置是由,HTML,正常文档流决定的。,元素的非常规定位可通过定位元素属性,positon,来实现的。,元素的非常规定位分为三种方式：,相对定位方式,relative,绝对定位方式,absolute,固定定位方式,fixed,5,.8,元素的非常规定位方式,定位元素属性,positon,的可选值如下：,static:,默认值，元素按照正常的文档流进行排列。,relative:,元素相对于它本身理应所在的位置进行偏移。,absolute:,元素被从,HTML,正常文档流中拉出，定位于相对于父容器元素的指定坐标。,fixed:,相对于浏览器窗口,进行定位。,IE7,以下浏览器不支持该属性。,利用,position,进行元素定位时同时要在,CSS,中设置,元素的,top,、,bottom,、,left,、,right,的值。,5,.8,元素的非常规定位方式,5,.8.1,CSS,绝对定位,5,.8.2CSS,固定定位,5,.8.3CSS,相对定位,5,.8.1,CSS,绝对定位,当元素的,position,属性值为,absolute,时，这个元素即被绝对定位了。,若绝对定位元素的父元素也设置了,position,属性，且,position,的属性值不是默认值时，,此时以该元素的父,元素为基准来进行定位。,若绝对定位元素没有一个设置了,position,属性的父元素，那么就会以,body,为基准来进行定位，即按照浏览器的窗口进行定位,。,示例,：,pos_ab.htm,pos_ab.htm,（,1,）,CSS,绝对定位,*margin:0px; padding:0px;,#allheight:350px; width:500px;,margin-left:20px;background-color:#eee;,#fixed1,#fixed2,#fixed3width:120px;height:50px;,border:5px double #000;,position:absolute;,#a,#bwidth:300px;height:100px;,border:1px solid #000; background-color:#ccc;,#fixed1,top:10px;right:10px;,background-color:#9c9;,#fixed2,top:80px;right:50px;,background-color:#9cc;,#fixed3,bottom:10px;left:0px;,background-color:#9cc;,pos_ab.htm,（,2,）,第,1,个绝对定位的容器,第,2,个绝对定位的容器,第,3,个绝对定位的容器,第,1,个无定位的,div,容器,第,2,个无定位的,div,容器,z-index,属性,当有多个绝对定位容器放在同一位置时，只会显示最上面的,容器。,CSS,绝对定位的容器的,z-index,属性对应这个方向，,z-index,属性的值越大，容器越靠上。,同,一位置上的,2,个绝对定位的容器只会显示,z-index,属性值较大的。,例：,csszengarden210_1.htm,css zen garden: the beauty in css design,body,background,: url(210/gradient_bg.jpg) repeat-x; margin: 0px; ,#extradiv1,#extradiv2,#extradiv3,#extradiv4 position: absolute; ,#,extradiv1z-index,: 1; background: url(210/clouds.jpg) repeat-x,; width:100%; right,: 0px; top:0px; height:100,%;,#extradiv2,z-index,: 1;background: url(210/water_edge.jpg) repeat-x; width: 100%;right: 0px; top: