1、第7章 JavaScript概述,网页中插入JavaScript脚本的方法,JavaScript的最大特点便是和HTML结合，JavaScript需要被嵌入到HTML中才能对网页产生作用。就像网页中嵌入CSS一样，必须通过适当的方法将JavaScript引入到HTML中才能使JavaScript脚本正常的工作。在HTML语言中插入JavaScript脚本的方法有三种，即： 使用script标记对将脚本嵌入到网页中（嵌入式） 直接将脚本嵌入到HTML标记的事件中（行内式） 通过script标记的src属性链接外部脚本文件（链接式）,1. 使用标记对将脚本嵌入到网页中（嵌入式）, 第一个JavaS
2、cript程序function msg () /JavaScript注释：建立函数 alert (“Hello, the WEB world!“) Click Here ,2. 直接将脚本嵌入到HTML标记的事件中（行内式）,可以直接在HTML某些标记内添加事件，然后将JavaScript脚本写在该事件的值内，以响应输入元素的事件 行内式引入JavaScript脚本Click Here,3. 通过script标记的src属性链接外部脚本文件（链接式）,如果需要同一段脚本供多个网页文件使用，可以把这一段脚本保存成一个单独的文件，JavaScript的外部脚本文件扩展名为“js” 链接式插入Js脚
3、本文件Click Here,7-3.js的代码 function msg () /建立函数 alert (“Hello,the WEB world!“),JavaScript语言基础,JavaScript变量,JavaScript的变量是一种弱类型变量，所谓弱类型变量是指它的变量无特定类型，定义任何变量都是用“var”关键字，并可以将其初始化为任何值，而且可以随意改变变量中所存储的数据类型，当然为了程序规范应该避免这样操作 var name =“Six Hang“; var age28; var school=“CSU“; var male=true; 变量命名规范：第一个单词所有字母都小写，
4、以后每个单词第一个字母大写，例如：sMyString,变量的命名原则,首字符必须是字母、下划线（_）或美元符号（$）； 余下的字母可以是下划线。美元符号、任意字母或者数字； 变量名不能是关键字或保留字 变量名对大小写敏感 变量名中不能有空格、回车符或其他标点字符 例如下面的变量名是非法的： var 5zhao; /数字开头，非法 var tangs; /对于变量名，单引号是非法字符 var this; /不能使用关键字作为变量名,运算符,运算符是指完成操作的一系列符号，也称为操作符。运算符用于将一个或多个值运算成结果值，使用运算符的值称为算子或操作数 算术运算符 Operator Descri
5、ption Example Result + Addition x=2 y=2 x+y 4 - Subtraction x=5 y=2 x-y 3 * Multiplication x=5 y=4 x*y 20 / Division 15/5 5/2 3 2.5 % Modulus 5%2 10%8 10%2 1 2 0 + Increment x=5 x+ x=6 - Decrement x=5 x- x=4,赋值运算符 Operator Example Is The Same As = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /=
6、 x/=y x=x/y %= x%=y x=x%y,关系运算符运算符 说明 例子 结果 = 是否相等(只检查值) 5=8 false = 是否全等(检查值和类型) x=5 y=“5“ x=y true x=y false != 不等于 5!=8 true = =,逻辑运算符 Operator Description Example & and x=6 y=3 (x 1) true | or x=6 y=3 (x=5 | y=5) false ! not x=6 y=3 !(x=y) true,字符串连接运算符,连接运算符 +：表达式中有字符串或字符变量 txt1=“What a very“ t
7、xt2=“nice day!“ txt3=txt1+txt2 结果: “What a verynice day!“,其他运算符,条件? 值1:值2 Var a=4,b=6;alert(ab?”a:b) /返回 6 Typeof运算符 ：返回表达式或变量的数据类型var a=“abc”;alert(typeof(a) /返回string 下标运算符：用来引用数组中的元素 逗号运算符，：用来分开不同的值 成员选择运算符 . ：用来引用对象的属性或方法如：document.write,JavaScript 数据类型：字符串（String）,字符串由零个或多个字符构成，字符可以是字母、数字、标点符号或
8、空格。字符串必须放在单引号或双引号中。例如： var course=“data structure“ var case=the birthday“19801106“ 还可以使用转义字符（escaping）“”实现特殊字符按原样输出： var score = “ run time 3 15“,JavaScript中的转义字符,Code Outputs 单引号 “ 双引号 & & n 换行符 r 返回 t tab，制表符 b 后退一格，backspace f 换页,字符串（String）对象常见属性,var myString = “This is a sample“; （1）length属性：它返
9、回字符串中字符的个数，例如：var name=“Six tang“;alert (name.length); /返回11 （2）charAt属性：它返回字符串对象在指定位置处的字符，第一个字符位置是0。例如：myString.charAt(2)； /返回i （3）charCodeAt：返回字符串对象在指定位置处字符的10进制的ASCII码myString.charCodeAt(2)； /返回105 （4）indexOf：要查找的子串在字符串对象中的位置myString.indexOf(“is”)； /返回2,字符串（String）对象常见方法,后面加参数，指定从第几个字符开始找myString
10、.indexOf(“is”,2) /返回2如果找不到返回-1 （5）lastIndexOf：从尾部开始查找并返回所在的位置myString.lastIndexOf(“is”) /返回5 （6）substr方法：截取字串myString.substr(10,3)； /返回sam其中10表示位置，3表示长度，长度省略截取到最后 （7）substring方法：截取字串myString.substring(5,9)；/返回is a,其中5表示开始位置，9表示结束位置 （8）split方法：分隔字串到一个数组中var a = myString.split(“ “);/a0 = “This” a1=“is
11、” a2=“a” a3=“sample”,字符串（String）对象常见方法,（9）replace方法：替换子串myString.replace(“sample”,”apple”); /结果 “This is a apple” （10）toLowerCase方法：变成小写字母myString.toLowerCase()；联/ this is a sample （11）toUpperCase方法：变成大写字母myString.toUpperCase(),数值型（number）,在Javascript中，数值型数据不区分整型和浮点型，数值型数据和字符型数据的区别是数值型数据不要用引号括起来。例如下
12、面都是正确的数值表示法， var num1=23.45 var num2=76 var num3=-9e5 /科学计数法，即-900000 alert(num1+ “ “+ num2+“ “+ num3);,布尔型（boolean）,布尔型数据的取值只有两个：true和false。布尔型数据不能用引号引起来，否则就变成字符串了。用方法typeof()可以很清楚地看到这点，typeof()返回一个字符串，这个字符串的内容是变量的数据类型名称。var married = true;document.write(typeof(married) +“);/ 输出booleanmarried = “tr
13、ue“;document.write(typeof(married); / 输出string,数组（array）,数组使用关键字Array来声明，同时还可以指定这个数组元素的个数，也就是数组的长度（length），例如：var rank =new Array(12); /论坛的用户共分12级 可以用方括号直接定义 var Map =“China“, “USA“, “Britain“; 如果不知数组的维数，可定义动态数组var myColor= new Array();myColor0= “blue“;myColor1= “yellow“;myColor2= “purple“;myColor3=
14、 “red“;,数组（array）,可以用参数创建数组 var Map =new Array(“China“, “USA“, “Britain”);Map4= “Iraq”数组长度为5，其中Map3的值为undefined,数组的常用属性和方法： （1）length属性：用来获取数组的长度，而数组的位置同样也是从0开始的。例如：var Map =new Array(“China“, “USA“, “Britain“);alert(Map.length+“ “+ Map2); /返回3 Britain （2）toString方法：将数组转化为字符串var Map =new Array(“Chin
15、a“, “USA“, “Britain“);alert(Map.toString()+“ “+ typeof(Map.toString();,数组的常用属性和方法： （3）concat方法：将多个数组连接起来形成新数组var a=new Array(1,2,3);var b=new Array(4,5,6);alert(a.concat(b); /输出1,2,3,4,5,6alert(a.length); /长度不度，仍为3 （4）join方法：将数组的元素连接起来生成字符串，默认用“，”连接var a=new Array(1,2,3);alert(a.join(); /输出1，2，3也可用指
16、定的符号连接，如：alert(a.join(“-”);,数组的常用属性和方法： （5）push方法：在数组的最后添加一个或多个项，同时更改数组的长度var a=new Array(1,2,3); a.push(4,5,6); alert(a.length); /输出6 （6）pop方法：返回数组的最后一个元素，并将其删除var a=new Array(1,2,3);alert(a.pop(); /输出3alert(a.length); /输出2,数组的常用属性和方法： （7）reverse方法：将数组中的元素逆序排列var a=new Array(1,2,3); alert(a.reverse
17、(); /输出3，2，1 （8）shift方法：返回数组的第一个元素，并将其删除var a=new Array(1,2,3);alert(a.shift(); /输出3alert(a.length); /输出2,数据类型转换,（1）数值转换为字符串：toStringvar a=4;a.toString; （2）字符串转换为数值：parseInt()、parseFloat()document.write(parseInt(“456red”)； /返回456如果字符串中不存在数字，则返回NaN,JavaScript中的语句,1. 条件语句条件语句可以使用程序按照预先指定的条件进行判断，从而选择需要
18、执行的任务。在JavScript中提供了if语句、if else语句和switch语句等三种条件判断语句。,（1）if语句 if(表达式）语句组if (判定条件) 语句;,JavaScript中的语句,if (判定条件)语句1; else语句2;,（2）if else 语句 if(表达式）语句组1else语句组2 ,JavaScript中的语句,（3）ifelse if else语句 if(表达式）语句组,通过条件语句判断时间,var d=new Date(); var time=d.getHours(); if (timeGood morning“) else if (time10 & ti
19、meGood day“) else document.write(“Hello World!“) ,JavaScript中的语句,（4）switch语句 switch(表达式）case 值1:语句1;break;case 值n:语句n;break;default:语句,循环语句,（1）for语句 for(初始表达式；循环判定式；更新表达式）循环体；,循环语句：反复执行一些语句,循环语句,（2）while语句 while(循环判定式）循环体；,循环语句,（3）dowhile语句 do循环体； while(循环判定式）,循环语句,（4）forin语句,在有些情况下，开发者根本没有办法预知对象的任何
20、信息，更谈不上控制循环的次数。这个时候用forin语句可以很好的解决这个问题。,循环语句,var xvar mycars = new Array()mycars0 = “Saab“mycars1 = “Volvo“mycars2 = “BMW“for (x in mycars)document.write(mycarsx + “) ,循环语句,（5）break和continue语句,break 语句：结束整个循环语句 continue 语句：结束本次循环 控制循环：与if 语句配合使用,函 数,函数是一个可重用的代码块，可用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复
21、输入大量的相同内容。不过，函数的真正威力体现在，我们可以把不同的数据传递给它们，而它们将使用实际传递给它们的数据去完成预定的操作。在把数据传递给函数时，我们把那些数据称为参数（argument）。 function functionname(arg1,arg2,.,argX)statementsreturnexpression,调用函数,function myName(sName)alert(“Hello“+sName); 该函数接受一个输入参数sName，不返回值。调用它代 码如下： myName(“six-tang“);,与其他编程语言一样，函数在执行过程中只要执行完return语句就会停
22、止继续执行函数体中的代码，因此return语句后的代码都不会执行。下例中函数中的alert()语句就永远都不会执行。 function fnSum(iNum1, iNum2)return iNum1+iNum2;alert (iNum1+iNum2); /永远不会被执行 ,一个函数中有时可以包含多个return语句，但每次只有一个会被执行，例如：function substr(iNum1, iNum2) if (iNum1=iNmu2)return iNum1-iNum2;elsereturn iNum2-iNum1;,如果函数本身没有返回值，但又希望在某些时候退出函数体，则可以调用无参数的r
23、eturn语句来随时返回函数体，例如：function myName(sName)if (myName =“bye“)return;alert(“Hello“+sName);,对 象,在客观世界中，对象指一个特定的实体。一个人就是一个典型的对象，他包含身高、体重、年龄等特性，又包含吃饭、走路、睡觉等动作。同样，一辆汽车也是一个对象，它包含型号，颜色，种类等特性，还包含加速、拐弯等动作。 在JavaScript语言中，也具有并能自定义各种各样的对象。例如，一个浏览器窗口可看成是一个对象，它包含窗口大小、窗口位置等属性，又具有打开新窗口、关闭窗口等方法。网页上的一个表单也可以看成一个对象，它包含表
24、单内控件的个数、表单名称等特性，以及表单提交和表单重设等方法。,对象的属性和方法,用来描述对象特性的一组数据，也就是若干变量，通常称为属性； 用来操作对象特性的若干动作，也就是若干函数，通常称为方法。,对象的分类,自定义对象：根据需要而定义的对象 内置对象：指JavaScript语言提供的对象，包括Math、Date、String、Array、Number、Boolean、Function、Object等实现最常用功能的对象 浏览器对象：是浏览器根据系统配置和所装载的页面提供的对象，如window、document、location,自定义对象,自定义对象的创建1：使用new运算符和内部构造函
25、数object()来创建一个空对象var person= new Object();注：Object对象是一种特殊的对象。JavaScript的所有对象都是Object对象类的实例，所以都可以使用Object对象的属性和方法 自定义对象的创建2：var person=name=“张三”,sex=“男” ;,自定义对象,定义属性：penson.name=“张三”; 定义方法：Function对象：任何函数都是Function对象定义Function对象：,this关键字,this指代当前元素： （1）如果this位于HTML标记中，通过事件触发调用的代码中有this，那指代当前元素。 （2）如果
26、this作为函数的参数，那this指代函数被调用的地方所在的当前元素。,作为普通函数直接调用时，this指代window对象,内置对象,时间日期：Date对象（1）var tDate= new Date()：创建一个含有系统日期和时间的Date对象 （2）var tDate=new Date(2009,9,1)：创建一个指定日期的Date对象（3）var tDate=new Date(2009,9,1,10,20,30,50)：创建一个指定时间的Date对象,内置对象,Date属性和方法,内置对象,数学计算：Math对象var tDate= new Date();,内置对象,浏览器对象模型BO
27、M,BOM,JavaScript是运行在浏览器中的，因此提供了一系列对象用于与浏览器窗口进行交互。这些对象主要有：window、document、location、navigator和screen等，把它们统称为BOM（Browser Object Model，浏览器对象模型）,window对象,window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类：（1）调整窗口的大小和位置；（2）打开新窗口；（3）系统提示框；（4）状态栏控制；（5）定时操作。,调整窗口的大小和位置,window对象有如下4个方法用来调整窗口的位置或大小
28、。 （1）window.moveBy(dx, dy)该方法将浏览器窗口相对于当前的位置移动指定的距离（相对定位），当dx和dy为负数时则向反方向移动。 （2）window.moveTo(x, y)该方法将浏览器窗口移动到屏幕指定的位置（x、y处）（绝对定位）。同样可使用负数，只不过这样会把窗口移出屏幕。 （3）window.resizeBy(dw, dh)相对于浏览器窗口的当前大小，把宽度增加dw个像素， 高度增加dh个像素。两个参数可以使用负数来缩写窗口 （4）window.resizeTo(w, h)把窗口大小调整为w像素宽，h像素高，不能使用负数。,打开和关闭窗口,打开新窗口用法：win
29、dow.open(url , target , options)options参数可能的选项包括：（1）height: 窗口的高度，单位为像素；（2）width：窗口的宽度，单位为像素；（3）left：窗口的左边缘位置；（4）top：窗口的上边缘位置；（5）fullscreen：是否全屏（6）location：是否显示地址栏（7）menubar：是否显示菜单项（8）resizable：是否允许改变窗口大小,打开和关闭窗口,（9）scrollbars: 是否显示滚动条（10）status：是否显示状态栏（11）titlebar：是否显示标题栏（12）toolbar：是否显示工具栏 例：windo
30、w.open(“pop.html”, “new”, “width=400,height=300”);,系统对话框,（1）window.alert(message)alert()方法前面已经反复使用，它只接受一个参数，即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。 （2）window.confirm(message)该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。例如：if (confirm(“确实要删除这张图片吗？“)
31、alert(“图片正在删除“);elsealert(“已取消删除！“);,（3）window.prompt(message , default)该方法将显示一个消息提示框，其中包含一个文本输入框。输入框能够接受用户输入参数，从而实现进一步的交互。该方法接受两个参数，第一个参数是显示给用户的文本，第二个参数为文本框中的默认值（可以为空）。整个方法返回字符串，值即为用户的输入。例如：var nInput=prompt(“请输入你的名字“,“);if(nInput!=null)document.write(“Hello! “+nInput); ,状态栏控制,状态栏控制（status属性） 浏览器状态
32、的显示信息可以通过window.status属性直接进行修改。例如：window.status=“看看状态栏中的文字变化了吗？“;,定时操作,定时操作通常有两种使用目的，一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次时间的显示，另一种则是将某个操作延时一段时间执行，例如迫使用户等待一段时间才能进行操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。 setInterval函数：用于设置定时器，每隔一段时间执行一次代码 clearInterval函数：取消setInterval设置的定时器 setTimeout函数：用于设置定
33、时器，在一段时间后执行一次指定的代码 clearTimeout函数：取消setTimeout设置的定时器,function showTime() var now=new Date();window.status=now.toLocaleString(); var timeID=window.setInterval(“showTime() “,1000); /设置定时器function stopShowTime() window.clearInterval(timeID); /取消定时器window.status=“已取消定时器“ 取消定时器 ,var timeID=setTimeout(“na
34、vigate(http:/);“,5000) function stopTimeout() window.clearTimeout(timeID);window.status=“已取消定时器“; 取消定时器 ,动态显示时间,function ab(id) return document.getElementById(id);function dispTime() ab(“clock“).innerHTML = (new Date().toLocaleString();/ 将时间显示在clock的div中function init() / 启动时钟显示dispTime(); /显示时间windo
35、w.setTimeout(init, 1000); / 过1秒钟更新执行一次init() ,地址栏控制（location对象）,location对象的主要作用是分析和设置页面的URL地 址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL,地址栏控制（location对象）,location对象的主要作用是分析和设置页面的URL地 址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL 请选择需要的网址搜狐新浪MSN中国,location.replace,如果不希望用户可以用“后退”按钮返回原来的页面
36、，可以使用replace()方法，该方法也能转到指定的页面，但不能返回到原来的页面了，这常用在注册成功后禁止用户后退到填写注册资料的页面。例如： 访问搜狐 可以发现转到新页面后，“后退”按钮是灰色的了,History对象,浏览器后退和前进（history属性） window还有一个非常实用的属性是history。它可以访问历史页面，但不能获取到历史页面的URL，如果希望浏览器返回前一页可以使用如下代码：window.history.go(-1); 如果希望前进一页，只需要使用正数1即可，代码如下：window.history.go(1); 如果希望刷新显示当前页，则使用0即可，代码如下：win
37、dow.history.go(0);,上面三句的效果还可以分别用back()和forward()实现，代码如下：window.history.back();window.history.forward(); location.reload();,navigator对象,navigator对象主要是用来检测客户端浏览器信息的，关于Web浏览器的信息，浏览器的类型、版本信息以及操作系统的类型都可以从该对象中获取。 navigator对象最常用的属性是userAgent，通常浏览器及操作系统的判断都是通过该属性来实现的，最基本的方法是首先将它的值赋给一个变量，代码如下：var sUserAgent
38、= navigator.userAgent;document.write(sUserAgent);,screen对象,screen对象主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸。 1.根据屏幕分辨率打开适合的网页2. 使浏览器窗口自动满屏显示window.moveTo(0,0);window.resizeTo(screen.availWidth,screen.availHeight);,文档对象模型DOM,DOM（Document Object Module）,DOM是“Document Object Model”（文档对象模型）的首字母缩写。当创建
39、了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型。 DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型。 DOM把一份文档表示为一棵树。,如下的HTML页面：,Trees, trees, everywhereTrees, trees, everywhereWelcome to a really boring page.Come again soon.,浏览器加载该页面并将之转换为树形结构：,DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root ele
40、ment）。 从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构。 通常把这样的树结构成为一棵节点树。,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者
41、树叶。 DOM中节点的类型： 元素节点（element node），诸如、等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是，它是根元素。 属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中。 文本节点（text node），元素中包含着文本节点“Trees, trees, everywhere”。,DOM编程在HTML页面中的应用,（1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。,1. 访
42、问指定节点,getElementById()：根据传入的ID参数返回指定的元素结点 getElementsByTagName() ：通过元素的标记名来访问元素，返回一个具有某个相同标记的所有元素的集合。,childNodes：可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素。 nodeName：返回元素节点的名称。注意，返回的结果全部是大写。元素结点返回标签名称，属性节点返回属性名 nodeType：用来区分节点的类型，元素节点的nodeType属性值是1，属性节点值是2，文本节点的值是3。 nodeValue：可以用来存取节点的值。文本节点
43、是指文本，属性结点指属性值，对于文档节点或元素节点这个属性返回空。,2. 访问元素属性,getAttribute(name) setAttribute(name, value) removeAttribute(name),访问相关节点,“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。 （1）访问html节点和body节点 （2）访问子节点 childNodes：子节点的列表； firstChild：第一个子节点； lastChild：最后一个子节点。,检查节点类型,DOM中的节点主要有三种类型，分别是元素节点、属性节点和文本节点 （1）元素节点的n
44、odeType值为1； （2）属性节点的nodeType值为2； （3）文本节点的nodeType值为3。,DOM编程实例,制作Tab选项卡面板,Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。,首先，一个tab面板可以分解成两部分，即上方的导航条和下面的内容框，实际上，导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候，才显示与其对应的一个内容框，而把其他内容框都通过（dislay:none）隐藏了，且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。,Tab面板的结构代码
45、, 课程特色 教学方法本课程主要特色课程地位教学方法和教学手段课程的历史 ,Tab面板的结构,从结构代码中可以看出，这个Tab面板是用具有2个列表项的无序列表做的导航条，使用2个div容器做的内容框。实际上这些div容器都没有上边框，而只有左、右和下边框，为了证实这一点，我们只需给这些div容器加个上边界（margin-top:12px;）就可以发现它们确实没有上边框，,其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。为了
46、实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器使用负边界法向上偏移1像素（margin-top:-1px;），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是div容器不能有上边框的原因。,所以只能使用ul的子元素的下边框覆盖ul元素的下边框，因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而IE 6只支持a元素的hover伪类，所
47、以选择用a元素的下边框覆盖ul元素的下边框 #tab margin: 0; /*通用设置，将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动，ul盒子高度为0，用填充使高度扩展*/list-style-type: none; /*去掉列表元素列表项前的小黑点*/border-bottom:1px solid #11a3ff; /*给ul元素添加下边框*/ ,每个选项a元素的样式,#tab a display: block;padding: 0 10px; /*给a元素左右加10像素填充 */height:23px; /*使a元素的高度正好等于ul元素
48、高度，从而它们的下边框重合 */ line-height:23px; /*以上两条使a元素文字垂直居中 */border: 1px solid #11a3ff; /*设置边框 */margin:0 4px 0 0; /*设置右边界 */font-size: 14px;color: #993300;text-decoration: none; /*去下划线 */background-color: #BBDDFF; ,这样ul#tab元素的高是24+1=25象素，a元素的高是23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被a元素撑开。 注意：ul元素作为浮动盒子a的外围容器不能设置宽和高，否则在IE中浮动盒子（a元素）将不会脱离标准流，这样a元素的盒子将被包含在ul元素的盒子中，两个盒子的下边框将无法重叠。这就是为什么对ul#tab元素设置下填充为24像素，而不设置高度为24像素（height:24px;）的原因。 同样，ul元素不能设置宽度，这意味着tab面板的宽度是无法由其自身控制的，但这并不构成一个问题，因为tab面板总是放在网页中其他元素（如div）中的，只要设置外围容器的宽度，就能控制tab面板的宽度了。,
