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

1、.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元素的非常规

2、定位方式 5.9 使用CSS制作背景 5.10综合实例解析,5.1 div标记和span标记,div标记和span标记都是CSS中最重要的标记。,div标记,div标记是一个块状元素，其实就是一个大容器，可以包含任何标记，如段落、标题、文本、表格等，也可以嵌套使用。 div的一般使用方法如下： 内容 例如： div标记 div标记是一个块状元素。 ,div的并列与嵌套,div可以多层进行嵌套使用。 嵌套的目的是为了实现更多复杂的页面排版。 例如，当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部，代码如下： 顶部 列表 内容 底部 ,span标记,span标记是内联元素，只能容纳文

3、本和其它内联元素，可与其它内联元素位于同一行，宽度和高度不起作用。一行内可以被span划分成好几个区域，从而实现某种特定效果。 span标记的使用方法如下： 内容,span与div的区别,div是一个块级元素(大容器)，可以包含段落、标题、表格等其他元素，有固定的宽度和高度。 span是一个内联元素(小容器)，一行内的内容可以被span划分成好几个区域，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 如: This is crazy ,5.2CSS的概念,认识层叠样式表(CSS) 层叠样式表所提供的样式 CSS布局与表格布局的分析 感性体验CSS的魅力,认识层叠样式表

4、(CSS),CSS，Cascading style sheet，层叠样式表，是为了弥补HTML在布局和样式方面的不足而产生的。 CSS文件，又称为CSS样式表，一个文本文件包含了一些CSS标记。 只要修改网站的CSS样式表，就可以改变整个站点的整体表现形式，大大减少了重复劳动。 CSS是每一个网页设计人员的必修课。,层叠样式表所提供的样式,字体样式 文字样式 背景样式 区域样式 分类样式,字体样式,字体样式用于设置HTML元素的字体、大小、粗细、常规/斜体等样式。如： font-family：字体。 font-size：大小。 font-weight：粗细。 font-style：常规/斜体。

5、 line-height: 行高，用于设定行间距,单位为px(像素)或em(相对于文本的字体尺寸的倍数)。 font：font-family、font-size、font-weight、font-style等样式的综合表示法。,文字样式,文字样式用于设置字符间距、文字间距、文字的对齐方式、文字效果等。如： letter-spacing:字符间距 word-spacing:文字间距 text-decoration:指定下划线、顶线、删除线等文字效果。,背景样式,背景样式用于设置背景颜色、背景图片、背景图片是否重复排列等。如： backgroud-color：背景颜色 backgroud-imag

6、e：背景图片 backgroud-repeat：背景图片是否重复排列 backgroud:背景颜色、背景图片、是否重复等背景样式的综合表示法,区域样式,用于设置区域的高度、宽度、内外边距大小、边框样式等。如： margin:用于指定区域的外边距大小。 height:用于指定区域的高度。 width:用于指定区域的宽度。 border:指定区域四周的边框粗细、样式及颜色。 padding：指定区域文字与区域边界的间距（即内边距）的大小。,分类样式,用于指定HTML元素的显示方式、列表项图片的相关属性等。如： display：用于指定HTML元素的显示方式。 list-style-image：用于

7、指定列表项图片的文件路径及名称。 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:

8、#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” ，使得网页设计师可以将图片和文本放在这

9、无形的网格中。 表格布局的主要弊端如下：,表格布局的主要弊端,1、把样式和内容混合在一起，使得文件的大小无谓变大，减慢速度，浪费用户的流量费用。 2、重新设计现有的站点和内容代价昂贵。 3、极难保持整个站点的视觉的一致性，花费也极高。,CSS布局,为了避免表格网页布局与生俱来的弊端，CSS布局应运而生。 利用CSS布局，网页设计者可使页面的实际内容与呈现格式的逻辑分离。 CSS布局的主要优势如下：,CSS布局的主要优势,1.一次编写，重复使用。 2.把样式和内容分离，内容简单规范，方便代码维护。 3.缩小文件体积，CSS文件无需重复下载，增快网络访问速度。 4.在不改变HTML的情况下，可快速

10、修改和切换网站的整体设计和风格。 5.帮助网站保持视觉的一致性。,感性体验CSS的魅力,著名的“CSS禅意花园”网站（）无疑把CSS发挥到了极致。 永远不变的HTML文本，仅通过链接数百个不同的CSS样式表，就成就了数百个风格迥异而精彩绝伦的网页设计作品。 下面仅仅演示其中的几款经典作品。,没有添加CSS的网页效果,添加CSS后的网页效果（一）,添加CSS后的网页效果（二）,添加CSS后的网页效果（三）,CSS禅意花园的第1种风格网页的效果,CSS禅意花园的第1种风格网页的CSS源文件,CSS禅意花园的第210种风格网页的效果,CSS禅意花园的第210种风格网页的CSS源文件,5.3 CSS的

11、声明方法,声明CSS通常有3种方法，并且这3种方法可以混合使用。 (1)行间样式表 (2)内部样式表 (3)外部样式表,(1)行间样式表,行间样式表指CSS编写在XHTML标签的style属性中。 一般格式为： 信息内容 例如： 信息内容 这种方式比较灵活，但样式和内容没有分离，一般不推荐使用。 示例：行间样式表.htm,行间样式表.htm, 行间样式表 蝶恋花 欧阳修 注释1: 章台路意指歌妓聚居之所。 注释2: 冶游生春露， 冶游即春游。 ,(2)内部样式表,这种方式把CSS代码集中编写在头部信息的标签内，很好地做到了样式与内容的分离，使用最为广泛。 一般格式为： 选择符1属性1:值1;属

12、性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

13、: 章台路意指歌妓聚居之所。 注释2:冶游生春露，冶游即春游。 ,(3)外部样式表,外部样式表是把CSS样式编码单独编写在一个独立的css文件中，由网页进行调用。 只要修改网站的外部样式表，就可以改变整个站点的整体表现形式，大大减少了重复劳动。 这种方式是CSS应用中最好的一种形式，尤其在大型网站比较多见。,(3)外部样式表,外部样式表中的css样式的一般格式为： 选择符1 属性1:值1; 属性2:值2 选择符2 属性1:值1; 属性2:值2 ,(3)外部样式表,在网页中调用外部样式表有两种格式： (1) import url(外部样式表名.css); (2) 如，假设样式表为“style.c

14、ss”,有以下两种设置格式： (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:

15、章台路意指歌妓聚居之所。 注释2:冶游生春露，冶游即春游。 ,外部样式表2.htm, 外部样式表2 蝶恋花 欧阳修 注释1: 章台路意指歌妓聚居之所。 注释2:冶游生春露，冶游即春游。 ,三种CSS声明方法的优先级比较,XHTML元素被多种CSS声明样式时，采取就近原则。 内部样式表的优先性高于外部样式表。 行间样式表的优先性又高于内部样式表。,5.4CSS的基本语法,CSS的属性和选择符 CSS的各种选择符详解 id和class的区别,CSS的属性和选择符,CSS语法的核心三大要素为： 选择符。选择符指CSS这段代码所控制的对象，比如id、class、标签等。 属性。属性则是CSS所控制对象

16、的各项样式属性，类型非常多，例如文本颜色、对齐、宽度、高度等。 值。值即为属性所对应的量化或描述设置。例如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

17、.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:#ff

18、0000; 示例：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属性的声明。以超级链

19、接为例： a:visitedcolor:#ff0000; 以上代码代表页面中的超级链接被访问过后，其样式设置为红色文本。,CSS常用伪类选择符,示例：伪类选择符, 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

20、: #0000FF;text-decoration: underline /* 鼠标点中激活的链接为蓝色 */ 我的第一个网页 字体颜色 字体字型的设置 ,示例：伪类选择符,通配选择符,在DOS操作系统中有一个*通配符，如*.*代表任何文件、*.mp3代表所有的mp3文件。 CSS中也有*通配选择符，代表所有对象，例如： *margin:0px; 以上CSS代码代表所有对象的外边距为0像素。,组合选择符,选择符还可以互相进行组合，形成新的选择符类型，常用的有4种组合方式： 群组选择符 包含选择符 标签指定式选择符 自由组合选择符,群组选择符,即当需要对多个选择符进行相同的样式设置时，可以把多个

21、选择符写在一起，并用逗号分隔，例如： 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标签文本为蓝色。,自由组合选择符,即综合以上的选择符类型自由组合的选择符，例

22、如： 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; , 猫爱打呼噜 原来是治病 猫在休憩时，喉咙中常会发出呼噜呼噜的声音。有人认为这是猫在打呼噜，但科学家却发现这是猫咪自疗的

23、方式之一。 美国北卡罗莱纳州科学家发现，家猫打呼声的频率约在27至44赫兹，美洲狮、中南美洲豹猫、非洲山猫、印度豹及西南亚野猫等的打呼声频率为20至50赫兹。 科学家指出，某种频率的音波可以刺激猫科动物医疗骨伤的疗程。猫科动物喉头发出的呼噜声，其疗伤的效用就如同人类置身于超音波下疗伤的效用。以上的发现使得“九命怪猫”之谜得以破解。 猫从高楼上坠下不死，且迅速复原的例子比比皆是。最近刊载于美洲动物医疗协会杂志中的一份研究报告指出，在调查了132宗猫自平均5.5层楼高的高度坠下的案例后发现，90%都存活下来。 ,注意：id和class的区别,同样的id名称在页面中只使用一次，可用于页面的布局等应用

24、。 同样的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

25、,0);,CSS中的常用数值单位,5.6 Div+CSS布局,XHTML中的块状元素和内联元素 块状元素的高度和宽度的设置 浮动属性float 闭合浮动属性clear 显示属性display 网页布局实例,XHTML中的块状元素和内联元素,XHTML的标签分为2种元素：块状元素和内联元素。 块状元素：默认是占据一行的位置，下一个元素将被迫挤到下一行显示。块状元素有固定的高度和宽度。 内联元素：内联元素会使得下一个元素自动贴到自己的右边显示，同一行能容纳多个内联元素。内联元素不能设置高度和宽度。,块状元素和内联元素,块状元素和内联元素可以相互转化。 块状元素转化为内联元素：css设置displa

26、y: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 注：

27、默认情况下块状元素的宽度为父对象宽度的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，所以在布局页面前，网页制

28、作者一定要把页面的默认边距清除。 为了方便操作，常用的方法是使用通配选择符*,将所有对象的边距清除，即将margin(外边距)和padding(内边距)置为0px。 CSS代码如下： *margin:0px; padding:0px;,布局页面前清除默认边距,浮动属性float,float 属性让设置的元素产生浮动效果，就是脱离原来页面的标准输出流，尽可能（只要空间允许）移动到前一个块级元素的左边或右边。 在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的

29、空间为止。 正常情况下，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,

30、 设置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

31、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属性正好

32、解决这一问题。 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;

33、 #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.h

34、tml, 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), ,网页布局实例,制作一个比较典型的

35、网页布局实例。(示例：page_div.html) 要求： 页面有上下4行区域，分别用作顶部广告区、横向导航区、主体区和版权信息区。 主体区分为左右2个大区， 左区域用于纵向导航区。 右区域用于主体内容区。,网页布局结构分析图,#left （左区域）,#right（右区域）,#footer（版权信息区）,#nav（导航区）,#top（广告区）,#mid（主体区）,#all,根据结构分析图编写的部分结构代码, 顶部广告区 横向导航区 纵向导航区 内容区 底部版权区 , * margin:0px; padding:0px; #all width:500px;margin:0px auto; #to

36、p 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_pag

37、e.html(1), div+css * margin:0px; padding:0px; #allmargin:0px auto; width:500px; #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:#

38、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设计过程中，要做的就是安排一个个盒

39、子的内容。,盒模型示意图,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。,盒子实际占据的宽度= margin-left + padding-left + border-left + width + padd

40、ing-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: 上边距 右边距 下边距 左边距； 在margi

41、n属性中，宽度的可选值如下： 长度值：规定以具体单位计的外边距值，比如像素等。 百分比：规定基于父元素的宽度或高度的百分比的外边距。 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

42、: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; backgr

43、ound-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可以统一设置，也可以上下左右分开设

44、置。,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; #

45、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盒

46、子（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; widt

47、h: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_padd

48、ing.htm（2）, a盒子 b盒子 c盒子 d盒子 e盒子 f盒子(无边距) ,5.8 元素的非常规定位方式,默认情况下，元素的常规位置是由HTML正常文档流决定的。 元素的非常规定位可通过定位元素属性positon来实现的。 元素的非常规定位分为三种方式： 相对定位方式relative 绝对定位方式absolute 固定定位方式fixed,5.8 元素的非常规定位方式,定位元素属性positon的可选值如下： static: 默认值，元素按照正常的文档流进行排列。 relative: 元素相对于它本身理应所在的位置进行偏移。 absolute:元素被从HTML正常文档流中拉出，定位于相对

49、于父容器元素的指定坐标。 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

50、属性的父元素，那么就会以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; borde

51、r:1px solid #000; background-color:#ccc; #fixed1top:10px;right:10px;background-color:#9c9; #fixed2top:80px;right:50px;background-color:#9cc; #fixed3bottom:10px;left:0px;background-color:#9cc; ,pos_ab.htm（2）, 第1个绝对定位的容器 第2个绝对定位的容器 第3个绝对定位的容器 第1个无定位的div容器 第2个无定位的div容器 ,z-index属性,当有多个绝对定位容器放在同一位置时，只会显示

52、最上面的容器。 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-inde

53、x: 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: 104px; height: 100%; #extradiv3 z-index: 2; background: url(210/fish_top.gif) no-repeat; right: 180px;top: 22

54、0px; height: 80px;width: 180px; #extradiv4 z-index: 3; background: url(210/fish_bottom.gif) no-repeat; right:100px;top: 260px; height: 108px;width: 224px; ,效果图,5.8.2 CSS固定定位,fixed，固定定位，是特殊的absolute，总按照浏览器窗口进行定位。 IE7以下浏览器不支持该属性，在此不再举例。,5.8.3 CSS相对定位,relative可以使用top,right,bottom和left设定相对于其本身在正常文档流中理应的

55、正常位置的偏移。 注意：top、 bottom、 left和right分别表示元素在上下左右四个方向上的偏移量。 示例：pos_rel.htm,pos_rel.htm, CSS相对定位 *margin: 0px; padding:0px; #allwidth:400px; height:400px; background-color:#ccc; #relativewidth:100px; height:80px; border:5px solid #f00; background-color:#9c9; position:relative;top:-10px;left:10px; #a,#b

56、width:200px;height:120px; background-color:#eee; border:2px dotted #000; 第1个无定位的div容器 相对定位的容器 第2个无定位的div容器 ,5.9使用CSS制作背景,5.9.1制作颜色背景 5.9.2给元素添加背景图片 5.9.3制作定位的背景 5.9.4制作不动的背景 5.9.5综合使用背景,5.9.1制作颜色背景,在CSS中，用来定义背景颜色的属性是background-color。 背景色属性background-color的语法结构如下： background-color:transparent|color;

57、其中各个属性值的含义如下： transparent:定义背景颜色为透明(默认值)。 color:使用各种颜色值定义背景颜色。,5.9.2给元素添加背景图片（1）,指定背景图片，是指定义元素中的是背景图片的属性是background-image。 由于背景图片只有在一定的区域范围内才能显示，所以在指定背景图片的时候，通常要定义元素的宽度和高度属性。 背景图片background-image属性用来定义图片背景路径，其语法结构如下： background-image:url(图片地址|none); 如： background-image:url(images/picture.jpg); 示例：cs

58、s_backgroundimage.html,css_backgroundimage.html, css_backgroundimage #content border: 1px solid #FF0000; height: 400px; background-image: url(images/5_2_01.jpg); ,背景图片页面效果,5.9.2给元素添加背景图片（2）,在CSS中，背景重复属性background-repeat，与backgound-image一起使用，决定图片是否重复，其语法结构如下： background-repeat:repeat|no-repeat|repeat-x|repeat-y; repeat:即默认方式，完全平铺(重复)背景。 no-repeat:在X及Y轴方向均不平铺(重复) 。 repeat-x:横向平铺(重复)背景。 repeat-y:纵向平铺(重复)背景。 示例：css_backgroundrepeat1.html、,css_backgroundrepeat1.html, css_backgroundrepeat1 #content border: 1px solid #FF0000; height: 400px; background-im