JavaWeb应用开发教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集

《JavaWeb应用开发教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集》由会员分享，可在线阅读，更多相关《JavaWeb应用开发教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集（67页珍藏版）》请在装配图网上搜索。

1、JavaWeb应用开发第一章WEB应用开发概述 目标目标了解WEB应用体系结构掌握JAVAWEB开发环境安装与配置1.1B/S结构编程技术1ASP技术技术 ASP技术是微软公司早期推出的技术是微软公司早期推出的B/S编程技术编程技术 2ASP.NET技术技术 ASP.NET是微软最新的是微软最新的B/S编程技术，编程技术，ASP.NET可以用三种语言来编写：可以用三种语言来编写：VB.NET、C#.NET、VJ#.NET。3JSP技术技术 JSP技术是技术是SUN公司推出的公司推出的B/S编程技术编程技术.本书主要介绍本书主要介绍JSP及相关技术及相关技术 4PHP技术 PHP是免费的技术，与

2、其配套的数据库是免费的技术，与其配套的数据库MySQL及操作系统及操作系统Linux也都是免也都是免费的费的.1.2WEB应用体系结构1静态网页静态网页 静态网页文件中没有程序代码，只有静态网页文件中没有程序代码，只有HTML标记，一般以后缀标记，一般以后缀.html或或htm保存，开发工具可以是任何纯文本编程器（如记保存，开发工具可以是任何纯文本编程器（如记事本）事本），下图是静态网页工作原理示意图，下图是静态网页工作原理示意图1.2WEB应用体系结构2动态网页动态网页 所谓动态网页，就是服务器端可以根据客户端的不同请求动态所谓动态网页，就是服务器端可以根据客户端的不同请求动态产生网页内容产

3、生网页内容,支持客户端和服务器端的交互功能支持客户端和服务器端的交互功能,下图是动态下图是动态网页的体系结构。网页的体系结构。3三层三层/N层层WEB应用结构应用结构 在构建企业级应用时，通常需要大量的代码，这些代码一般可在构建企业级应用时，通常需要大量的代码，这些代码一般可以在逻辑上（在同一机器）或物理上（在不同机器）划分为不以在逻辑上（在同一机器）或物理上（在不同机器）划分为不同层次，下图是三层同层次，下图是三层B/S结构。在三层结构中，每二层之间都结构。在三层结构中，每二层之间都可以添加服务层从而构建可以添加服务层从而构建N层结构。层结构。1.2WEB应用体系结构JavaWeb应用开发第

4、二章JavaWeb编程基础：目标目标掌握HTML的基本元素掌握HTML的table元素掌握HTML的form元素理解JavaScript的基本原理。掌握JavaScript的基本语法。理解JavaScript事件机制。掌握CSS基本原理掌握CSS在布局中的应用基本概念HTTP-HyperTextTransferProtocol：超文本传输协议HTML-HyperTextMarkupLanguage：超文本标记语言FTP-FileTransferProtocol：文件传输协议URL-UniformResourceLocators：统一资源定位器2.1HTML基础源文件：HelloWorld.ht

5、ml测试 你好，这是我的web测试！第一个HTML程序2.1HTML基础SampleHTML基本框架2.1HTML基础Head中常用元素：用于设置一些头信息用于定义样式用于定义脚本2.1HTML基础：各级标题：字体的颜色、大小：黑体：斜体：下划线：斜向上表示：斜向下表示：无序号列表：有序号列表：定义段落：换行：分区显示文本格式化2.1HTML基础链接文字或者图片显示图片与超链接标记HTML表格：定义表格：定义行：定义列：定义表头Table标记常用属性：width：width属性用于定义表格的宽度height：height属性用于定义表格的高度border：border属性用于定义表格的边框的宽

6、度，默认为0，也就是没有边框；bgcolor：定义表格的背景色。2.1HTML基础2.2表单（FORM）文本框密码框多选框单选框隐藏项文本域列表项列表框文件上传框HTML表单标记2.3JavaScriptJavaScript是一种脚本语言,可以嵌入到HTML中,主要用于网页动态效果和HTML客户端表单验证客户端的JavaScript必须要有浏览器的支持通过在网页中加入标记引入外部的以.js作为扩展名JavaScript文件一个页面可以有多个，不同部分的方法和变量，可以共享。document.write(“第一个JavaScript页面);在网页中加入JavaScript2.3JavaScrip

7、t例例2-8：在HTML中嵌入JavaScript源文件：javascriptTest_1.html在HTML中嵌入JavaScript document.write(这是这是javascript输出的内容输出的内容!)；1注释在JavaScript中采用和Java中类似的注释方式：单行注释用“/”，多行注释用“/*”和“*/”括起来：/单行注释/*多行注释和Java中类似*/2.3.1JavaScript基本语法2.变量定义：(1)用var来定义简单变量例如：varage；age=100+10；/先定义后使用username=AlexWen；/直接使用虽然JavaScript可以不需定义即可

8、直接使用变量，但不建议这么做2.3.1JavaScript基本语法(2)数组定义var数组名=newArray(数组长度)例如：vararr=newArray(3);数组元素可以通过下标访问例如：arr0=20;通过arr.length可以取得数组的长度2.3.1JavaScript基本语法3.运算符运算符算术运算：+、-、*、/关系运算符：、=、=、=逻辑运算：&（与）|(或)!(非)字符串运算符：连接运算：+条件表达式：条件?A:B2.3.1JavaScript基本语法4.流程控制语句(if)if(条件表达式)statement；elseif(条件表达式)statement；elsesta

9、tement;2.3.1JavaScript基本语法5.循环语句(1)for语句的基本格式如下：for(initialization;test;increment)statements(2)while循环的基本格式如下：while(expression)statements2.3.1JavaScript基本语法(3)dowhile循环的基本格式如下：dostatementswhile(expression);(4)遍历数组或者对象的属性for(variableinobject|array)statements2.3.1JavaScript基本语法例例2-9：使用使用 for.in 循环遍历数组

10、循环遍历数组源文件：源文件：scriptTest_2.htm for.in循环循环 下面是下面是script输出结果：输出结果：var a,i;/初始化数组初始化数组 a=new Array(电子系电子系,计算机系计算机系,材料工程系材料工程系);/迭代数组迭代数组 for(i in a)document.write(ai+);2.3.1JavaScript基本语法6.函数函数的定义语法格式如下：function(参数列表)函数体;return表达式;例如：functioncal(a,b)returna+b：2.3.1JavaScript基本语法2.3.2JavaScript常用内置对象1wi

11、ndow对象:window对象表示的是一个和浏览器相关的最高级对象.Window对象最常用的地方在于从一个窗口中新开一个窗口，它的基本语法如下：NewWindow=window.open(url，windowName,windowPros)；其中：newWindow为表示这个新开窗口对象的变量名称；url是这个新开窗口所引用的url；windowPros为新开窗口的属性，可以取下面各值：lToolbar：用于指明新开窗口是否需要标准工具栏；lstatus：用于指明新开窗口是否需要状态条；lmenubar用于指明新开窗口是否需要菜单栏；lscrollbar：用于指明当新开窗口中的文档的内容超出窗

12、口大小的时候是否需要滚动条；lresizable：是否允许改变新开窗口的大小；lwidth：指定新开窗口的宽度；lheight：指定新开窗口的高度；ltop：指定新开窗口距离电脑屏幕上方的像素；lleft：指定新开窗口距离电脑屏幕左边的像素。例例2-10：用：用window.open()打开一个新窗口打开一个新窗口源文件：源文件：windowOpen.htm 父窗口父窗口 function createNewWindow(url)/打开一个新的窗口，窗口内容由打开一个新的窗口，窗口内容由url参数决定参数决定 window.open(url,width=300,height=120,toolb

13、ar=no,resizable=no,top=100,left=100);2.3.2JavaScript常用内置对象2document对象：document对象包含当前文档的信息。常用方法：write()/writeln()/在浏览器中输出动态内容；getElementById()/在文档中通过在文档中通过html元素元素的的ID属性查找属性查找html元素对象；元素对象；getElementsByTagName()/在文档中通过在文档中通过html元素的元素的NAME属性查找属性查找html元素对象；元素对象；2.3.2JavaScript常用内置对象3form对象：Form对象是docum

14、ent下的一个子对象，表示表单对象。可以使用document.formName或者document.formsindex的方式来获得对某个form的引用；得到指定的form对象后，就可以使用它来获得form中的各个表单元素，例如：document.myForm.myText表示myForm表单中的myText这个表单元素。关于HTML元素的引用请参考例例2-11-例例2-1132.3.2JavaScript常用内置对象2.3.3 JavaScript的对话框警告框(alert)：用于显示JavaScfipt的警告对话框;例例2-14询问框(prompt)：用于接收用户输入的询问对话框，返回输入

15、的值；例例2-15确认框(confirm)：用于显示javascript确认对话框，返回true/false例例2-162.3.4JavaScript事件处理1窗口文档事件onLoad：出现在一个文档完成对一个窗口的载入时。例例2-172焦点事件onfocus和onblur当光标的焦点移到页面的某些元素时，将会发生“聚焦事件(onfocus)”，失去焦点的元素将发生“失去焦点事件（onblur）”。例例2-18-例例2-193单击事件（onclick）当在某个表单元素上单击的时候，将会发生点击(click)事件。例例2-204内容改变事件(onchange)当某些表单的内容发生改变的时候，将发

16、生“（内容）改变”事件(onchange)例例2-215选择事件（onselect）当选中表单元素中的文本内容时，将会发生“选择(onselect)”事件。例例2-226提交事件(onsubmit)当表单提交的时候，会发生“表单提交”事件 例例2-237鼠标事件（onMouseOver/onMouseOut）当鼠标移到某个对象上时，该对象会触发onMouseOver事件，当鼠标移开某个对象上时会触发onMouseOut事件。例例2-242.3.4JavaScript事件处理2.4JavaScript正则表达式一个正则表达式就是由普通字符（例如字符a到z）以及特殊字符（称为元字符）组成的文字模式

17、。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。在JavaScript中，正则表达式主要应用于表单数据的客户端验证。例如：校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字符串functionisRegisterUserName(s)varpatrn=/a-zA-Z1(a-zA-Z0-9|._)4,19$/;/a-zA-Z1(a-zA-Z0-9|._)4,19$/;if(!patrn.exec(s)returnfalse;elsereturntrue;定位符限定符操作符元字符1建立正则表达式构造正则表达式

18、的方法和创建数学表达式的方法一样。也就是用多种元字符与操作符将小的表达式结合在一起来创建更大的表达式。可以通过在一对分隔符之间放入表达式模式的各种组件来构造一个正则表达式。对JavaScript而言，分隔符为一对正斜杠（/）字符。例如：/st*$/用于匹配一个空白行。/a-z/用于匹配任何从小写a到小写z的字符。2.4.1正则表达式基本语法2正则表达式中的特殊字符-元字符参考教材中的表2-12.4.1正则表达式基本语法3限定符限定符 正正则则表表达达式式支支持持限限定定符符的的概概念念。这这些些限限定定符符可可以以指指定定正正则则表表达达式式的的一一个个给给定定组组件件必必须须要要出出现现多多

19、少少次次才才能能满满足足匹匹配配。下下表表给给出出了了各各种种限限定定符符及及其其含含义的说明：义的说明：字符字符描述描述*匹配前面的子表达式零次或多次。例如，匹配前面的子表达式零次或多次。例如，zo*能匹配能匹配 z 以及以及 zoo。*等价于等价于0,。+匹配前面的子表达式一次或多次。例如，匹配前面的子表达式一次或多次。例如，zo+能匹配能匹配 zo 以及以及 zoo，但不能匹配，但不能匹配 z。+等价于等价于 1,。?匹配前面的子表达式零次或一次。例如，匹配前面的子表达式零次或一次。例如，do(es)?可以匹配可以匹配 do 或或 does 中的中的do。?等价于等价于 0,1。nn 是

20、一个非负整数。匹配确定的是一个非负整数。匹配确定的 n 次。例如，次。例如，o2 不能匹配不能匹配 Bob 中的中的 o，但是能匹，但是能匹配配 food 中的两个中的两个 o。n,n 是一个非负整数。至少匹配是一个非负整数。至少匹配n 次。例如，次。例如，o2,不能匹配不能匹配 Bob 中的中的 o，但能匹配，但能匹配 foooood 中的所有中的所有 o。o1,等价于等价于 o+。o0,则等价于则等价于 o*。n,mm 和和 n 均为非负整数，其中均为非负整数，其中n=m。最少匹配。最少匹配 n 次且最多匹配次且最多匹配 m 次。刘，次。刘，o1,3 将将匹配匹配 fooooood 中的前

21、三个中的前三个 o。o0,1 等价于等价于 o?。请注意在逗号和两个数之间不能。请注意在逗号和两个数之间不能有空格。有空格。2.4.1正则表达式基本语法4定位符定位符 定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。下表包含了正则表达式中定位符及或只在单词的开始或结尾处出现的正则表达式。下表包含了正则表达式中定位符及其含义的列表：其含义的列表：字符字符描述描述 匹配输入字符串的开始位置。如果设置了匹配输入字符串的开始位置。如果设置了 RegExp 对象的对象的

22、Multiline 属性，属性，也匹配也匹配 n 或或 r 之后的位置。之后的位置。$匹配输入字符串的结束位置。如果设置了匹配输入字符串的结束位置。如果设置了RegExp 对象的对象的 Multiline 属性，属性，$也匹配也匹配 n 或或 r 之前的位置。之前的位置。b 匹配一个单词边界，也就是指单词和空格间的位置。匹配一个单词边界，也就是指单词和空格间的位置。B 匹配非单词边界。匹配非单词边界。2.4.1正则表达式基本语法2.4.2Javascript正则表达式对象1创建正则表达式对象创建正则表达式对象 创建正则表达式对象有两种语法格式：创建正则表达式对象有两种语法格式：语法语法1：re

23、=/pattern/flags 语法语法2：re=new RegExp(pattern,flags)其中：其中：re：必选项。将要赋值为正则表达式模式的变量名，它保存正则表达式对：必选项。将要赋值为正则表达式模式的变量名，它保存正则表达式对象。象。pattern：必选项。要使用的正则表达式模式。：必选项。要使用的正则表达式模式。如果使用语法如果使用语法 1，用，用“/”字符分隔模式。如果用语法字符分隔模式。如果用语法2，用引号将模式引，用引号将模式引起来。起来。flags：可选项可选项，可用的有：，可用的有：g：（全文查找出现的所有：（全文查找出现的所有 pattern）i：（忽略大小写）：（

24、忽略大小写）m：（多行查找）：（多行查找）2正则表达式对象常用方法（1）exec方法用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。例：例：2-25说明了exec（）方法的使用。（2）test方法方法返回一个Boolean值，它指出在被查找的字符串中是否存在模式。2.4.2Javascript正则表达式对象1校验是否全由数字组成functionisDigit(s)varpatrn=/0-91,20$/;if(!patrn.exec(s)returnfalseelsereturntrue 说明：在说明：在JavaScript中，空值（中，空值（NULL）和非空可以用来在条）和

25、非空可以用来在条件表达式中表示件表达式中表示“false”和和“true”。exec（）方法本来是（）方法本来是返回一个数组，当数组为空（返回一个数组，当数组为空（NULL）时代表）时代表“false”，说，说明字符串（明字符串（s）与正则表达式模式不匹配，否则代表）与正则表达式模式不匹配，否则代表“true”。当然这里也可以用当然这里也可以用test()方法。方法。2.4.3常用正则表达式2校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字符串functionisRegisterUserName(s)varpatrn=/a-zA-Z1(a-zA-Z0-9|._)4,19$

26、/;if(!patrn.exec(s)returnfalse;elsereturntrue正则表达式的使用请参考例正则表达式的使用请参考例2-29(验证表单)2.4.3常用正则表达式2.5CSS样式表基础251CSS基本概念CSS是层叠样式表（CascadingStyleSheets）的缩写，是一种用于为HTML文档定义布局的样式表语言。CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等2.5.2CSS基本语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selectordeclaration1;declaration2;.declarationN例如：h1 color

27、:red;font-size:14px;选择器（selector）通常是需要改变样式的HTML元素。声明（declaration）由一个属性属性和一个值值组成。2.5.3在HTML文档中应用CSS1内联样式表：内联样式表是使用HTML元素的style属性。Style属性可以应用于任意body元素(包括body本身)。例如：例子这一段是红色的2.5.3在HTML文档中应用CSS2内部样式表：内部样式表是采用内部样式表：内部样式表是采用HTML元素元素style把样式表的把样式表的内容定义在内容定义在HTML文件的文件的标记内。标记内。例子 body background-color:#FF000

28、0;这个页面是红色的2.5.3在HTML文档中应用CSS3外部样式表（引用一个样式表文件）外部样式表是一个扩展名为.css的文本文件-样式表文件。引用方法：在HTML文件的区域内使用标记进行链接，语法格式如下：其中其中url为样式表文件的地址，可以是相对地址，也可以是绝对为样式表文件的地址，可以是相对地址，也可以是绝对地址。地址。2.5.4CSS高级语法1选选择择器器的的分分组组：定定义义选选择择器器时时，可可以以对对选选择择器器进进行行分分组组。例例如：如：h1,h2,h3,h4,h5,h6 color:green;2派派生生选选择择器器：派派生生选选择择器器允允许许根根据据文文档档的的上上

29、下下文文关关系系来来确确定定某个标签的样式某个标签的样式。例如：例如：li strong font-style:italic;font-weight:normal;/该样式只作用于该样式只作用于标记内的标记内的3类选择器类选择器:在定义类选择器时，在自定义类名称前面加上一在定义类选择器时，在自定义类名称前面加上一句点句点“.”。语法格式如下：。语法格式如下：标记名标记名.类名类名 declaration1;declaration2;.declarationN 例如：例如：p.red color:redp.blue color:blue.center text-align:center 其中：其

30、中：red、blue和和center称为类选择器。称为类选择器。red和和blue这两个类选择这两个类选择器只能用于段落标记器只能用于段落标记p，而，而center类选择器可以用于任何类选择器可以用于任何HTML元素。元素。2.5.4CSS高级语法4id 选择器选择器id 选择器可以为指定特定选择器可以为指定特定 id 的的 HTML 元素指定特定的样式。元素指定特定的样式。id 选择器以选择器以#来定义。语法格式如下：来定义。语法格式如下：标记名标记名#id选择器名选择器名 declaration1;declaration2;.declarationN 例如：例如：#red color:re

31、d;#green color:green;注意：同一个id属性在同一个HTML文档中只能出现一次，因为在HTML文档中，ID属性必须具有唯一性。2.5.4CSS高级语法5.伪类伪类:伪类（伪类（pseudo-class）可以在为）可以在为HTML元素定义元素定义CSS属性的时属性的时候将条件和事件考虑在内候将条件和事件考虑在内.例如：例如：a:link color:blue;/伪类伪类:link用于浏览者从未访问过的链接用于浏览者从未访问过的链接 a:visited color:red;/伪类伪类:visited用于浏览者已访问过的链用于浏览者已访问过的链接接 a:active backgro

32、und-color:#FFFF00;/伪类伪类:active用于活用于活动的链接动的链接 a:hover color:orange;font-style:italic;/伪类伪类:hover用于用于有鼠标悬停的链接有鼠标悬停的链接 2.5.4CSS高级语法2.5.5CSS样式属性1CSS 背背景景属属性性:CSS 背背景景属属性性用用于于改改变变元元素素的的背背景景色色彩彩或或背背景图片景图片，参考表参考表2-42CSS字字体体属属性性：字字体体属属性性用用于于定定义义文文本本的的字字体体系系列列、大大小小、加粗、风格加粗、风格，参考表参考表2-53CSS文文本本属属性性：文文本本属属性性用用

33、于于定定义义文文本本的的外外观观，如如文文本本的的颜颜色色、字字符符间间距距，对对齐齐文文本本，装装饰饰文文本本，对对文文本本进进行行缩缩进进等等等等，参考表参考表2-64CSS列列表表属属性性：列列表表属属性性用用于于设设置置、改改变变列列表表项项标标志志，参参考表考表2-7 5CSS边框属性：边框属性用于设置元素边框的样式、宽度边框属性：边框属性用于设置元素边框的样式、宽度和颜色和颜色，参考表，参考表2-72.5.6CSS盒状模型1CSS盒状模型盒状模型 CSS盒状模型（盒状模型（box model，也有称之为框模型）用于描述也有称之为框模型）用于描述一个一个HTML元素形成的矩形盒元素形

34、成的矩形盒子子(任何一个任何一个HTML元素都是一元素都是一个矩形盒子个矩形盒子)。盒状模型为各。盒状模型为各个元素调整外边距个元素调整外边距（margin）、边框）、边框（border）、内边距）、内边距（padding）等）等2CSS边距属性边距属性用来设置元素的内边距和外边距。CSS边距属性、作用、语法及示例参考表2-92.5.6CSS盒状模型例例2-26设置边框、边距css框模型p/*定义段落背景*/background-color:blue;/*定义字体大小*/font-size:20px;/*定义边框为红色双粗线*/border:thickdoublered;/*内边距都为100p

35、x*/padding:100px;/*上、下外边距为20px，左右外边距为80px*/margin:20px80px;这里的文本位于框中2.5.6CSS盒状模型2.5.7CSS定位CSS 定位机制定位机制 CSS 有三种基本的定位机制：普通流（默认）、浮动有三种基本的定位机制：普通流（默认）、浮动（float）和定位）和定位(position)定位又可以分为：绝对定位（定位又可以分为：绝对定位（absolute）和相对定位）和相对定位（relative）CSS定位的原理定位的原理 把浏览器窗口想象成一个把浏览器窗口想象成一个坐标系统；可以将任何坐标系统；可以将任何盒子（盒子（box）放置在坐）

36、放置在坐标系统的任何位置上。标系统的任何位置上。2.5.7CSS定位1.普通流普通流:如果没有特别指定，所有框都在普通流中定位，普如果没有特别指定，所有框都在普通流中定位，普通流中的元素的位置由元素在通流中的元素的位置由元素在(X)HTML 中的位置决定中的位置决定 2.浮动浮动:可以通过可以通过CSS属性属性float令元素向左或向右浮动。也就是令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边右边或者左边 由于浮动框不在文档的普由于浮动框不在文档的普通流中，所以文档的普通流中，所以文档的普通流中的

37、块框表现得就通流中的块框表现得就像浮动框不存在一样，像浮动框不存在一样，右图是浮动示意图右图是浮动示意图浮动的应用案例：假如我们想让一张图片被一段文字围绕着，浮动的应用案例：假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：那么其显示效果将如下所示：causasnaturalesetantecedentes,idciroetiamnostrarumvoluntatum.#picturefloat:left;width:100px;2.5.7CSS定位2.5.7CSS定位3绝绝对对定定位位:绝绝对对定定位位的的元元素素框框从从文文档档流流中中完完全全删删除除，并并相相对对于于其包含

38、块定位其包含块定位.要要对对元元素素进进行行绝绝对对定定位位，应应将将position属属性性的的值值设设为为absolute。下图是绝对定位示意图下图是绝对定位示意图例例2-27绝对定位的应用css框模型divbackground-color:gray;border:thicksolidred;margin:0;width:200px;height:50px;position:absolute;top:0;left:0;这是div内容2.5.7CSS定位4相相对对定定位位:采采用用相相对对定定位位的的元元素素，其其位位置置是是相相对对于于它它在在文文档档中中的的原原始始位位置置计计算算而而来来的的。通通过过设设置置垂垂直直或或水水平平位位置置，让让这这个元素个元素“相对于相对于”它的起点进行移动它的起点进行移动。要对元素进行相对定位，应将要对元素进行相对定位，应将position属性的值设为属性的值设为relative 2.5.7CSS定位5定位与布局属性定位与布局属性 与定位有关的与定位有关的CSS样式属性请参考教材中的表样式属性请参考教材中的表2-10。26 实用案例实用案例 参考教材的代参考教材的代码，用码，用div+css完成完成右图界面布局右图界面布局设计设计2.5.7CSS定位