2）远程调用
[a去掉udio:http://url/name.mp3]
3）播放多首
[a去掉udio:http://url/name.mp3,http://url/name.mp3]

4）自动播放
[a去掉udio:http://url/name.mp3|autostart=yes]
5）循环播放
[a去掉udio:http://url/name.mp3|loop=yes][Audio clip: view full post to listen]

在HTML中打开窗口

我们已经知道如何在HTML中打开一个窗口。多数当前流行的浏览器中, 你可用一个href语句打开一个新窗口，例如：

点击 
这里即可打开另一个窗口.

说明：上述代码，目标链接打开的窗口是上面名为”yer_new_window” 的窗口。
简单温习href目标后，下面将学习如何在JavaScript中打开窗口

在JavaScript中打开窗口

在HTML中打开窗口存在一些缺陷：你左右不了其窗口的大小及式样。但JavaScript给了你这种控制权。

JavaScript中打开窗口的语法是：

window.open("URL","name","features");

参数说明：
第一个参数 URL，实际使用时，可能是这样的 “http://shop34219081.taobao.com”
第二个参数 name，窗口的名字，如果你打开窗口时已有一个同名窗口打开，那么URL将把open语句送到原先已打开的窗口。
第三个参数 features，该参数可选，它表示窗口所具有的不同特征，具体参阅“Windows特性”

来看实例1：

Here's a window named javascript_1.

来看实例2：

Here's a window named javascript_1.

这两个小实例将会在两个窗口中打开两个页面，且两个窗口名分别为javascript_1，javascript_1，如果又有一实例是这样的：

Here's a window named javascript_1.

那么你就将一个名为window_3.html的页面放置到了第一个窗口中。

学习点
window.open(”URL”,”name”,”features”)
注意：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()

JavaScript DOM

你要是了解 HTML DOM，就不会对JavaScript DOM难于理解，关于HTML DOM ，详情请见w3school中文网的HTML DOM教程

在JavaScript 中缺省的窗口对象为 window，如何获取缺省窗口的属性呢？

var the_status = window.status;

这是说：找到称为window 的status属性，将之调用到变量the_status中。窗口的status特性包含了状态条上出现的词句。你也可事先设置它，像这样：

window.status = "I'm monkeying around!";

窗口间的交流

有时候我们同时打开了两个窗口，并且需要将另一个窗口移到前台。为了使用javascript实现窗口之间的交流，需要对该窗口施加一个引用。

var new_window = window.open("hello.html","html_name",
"width=200,height=200");

该语句打开一个小窗口并将其赋值给变量new_window作为对该窗口的引用。

你可以象对窗口调用方法那样对new_window调用方法。

new_window.blur();

现在我们看看将新窗口移到前台或移到后台的两个链接：

Bring
it forward
Put it
backward

将上面的代码连起来，完整的就是这样的:

[html][head][title]Getting and using a window reference[/title]
[script language="JavaScript"]


A new window has been opened and moved to the background.

Bring it forward
Put it backward
[/body][/html]

框架 Frames

其实，框架也是窗口的一个特性，主要是用来实现分隔窗口。

还是通过一个实例来学习变量的相关语法：

[html]
[head]
[script language="JavaScript"]

[/script]
[/head]
[/html]

学习点
①当首次用一变量时，应以“var”申明。 尽管以var 作为变量申明严格说并不必要，但这是一个好习惯。
②变量名对大小写敏感
③可用document.writeln() 来写文本和网页中的HTML

变量字符串

别小看JavaScript中字字符串，它的使用相当灵活：

[html][head]
[script language="JavaScript"]

[/script]
 [/Head][/Html]

学习点
* var secs_per_min = 60;
* var bad_monkey = “The monkey scowls at you and burps.”;
* var techy_monkey = monkey + demanding + tech;

* var monkey = prompt(”What’s the monkey’s name?”, “The monkey”);

* document.writeln(”[b]The monkey dances[/b] “);
* document.writeln(bad_monkey +”[br]“);
* 字符串对象：
document.writeln(techy_monkey.fontcolor(’red’);

条件语句

If 语句

if (条件) {
  条件成立时执行代码
}

If…else 语句

if (条件){
  条件成立时执行此代码
}
else{
  条件不成立时执行此代码
}

If…else if…else 语句

if (条件1){
  条件1成立时执行代码
}
else if (条件2){
  条件2成立时执行代码
}
else{
  条件1和条件2均不成立时执行代码
}

实例：

[html]
[head]
[title]If Then Exercise[/title]
[script language = "JavaScript"]
  var color = prompt("What color do you prefer, red or blue? ","");
  var adjective;
  if (color == "red") {
    adjective = "lurid.";
  }else if (color == "blue") {
    adjective = "cool.";
  }else {
    adjective = "confused."
  }
  var sentence = "You like " + color + "? The monkey thinks you're " +adjective + "[p]";
  // stop hiding me -->
[/script]
[/head]

 [body]
[script language = "JavaScript"]
  
[/script]
[/body]
[/html]

链接事件

用户点击一个链结，或将鼠标移到其上，JavaScript发送一个链结事件。
一种链结事件叫做onClick，当用户点击它时才发送。
另一种叫onMouseOver，用户将鼠标移到上面时即发送。

[html]
 [head]
 [/head]
 [body]
 Click on me!
 Mouse over me!
 [/body]
[/html]

学习点
onClick, onMouseOver

图片交换

JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。

[html]
[head]
[title]图片交换[/title]
[/head]

[body]




change

[/body]
[/html]

再来一个稍复杂的实例。

这个实例要完成这样的一个功能：页面上有两张图片（一上一下），当将鼠标移到下面的图片上是，图片变化，每移动一回，都会变，当点击鼠标时，上面的图片也变成了和下面一样的图片。这样的效果不错吧：

[html]
[head]


[script language="JavaScript"]

[/script]

[/head]
[body]
[p][/p]
Browser Configuration

你好,



[p]将移到下面的图片上，直到找到你喜欢的图片，然后点击它。[/p]

[p]


[/body]
[/html]

学习点
Document.imageObject.src

JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行。除了JavaScript，其它的脚本语言还有HTDMLDOM，DHTML，VBScript，AJAX，WML Script等。

初次接触，常会碰到如HTML，XML，HTDML DOM，DHTML，JavaScript等词汇，顺便在这里简单说说它们的关系和区别，理清思绪：

* JavaScript等属于脚本语言，JavaScript离不开HTML DOM；

* HTML 指超文本标签语言，可以说它是学习网页的基础。

* XML 指扩展标记语言，它是独立于软件和硬件的信息传输工具。
XML 不是 HTML 的替代，是对 HTML 的补充。简单的讲，它们的区别是：HTML 旨在显示信息，而 XML 旨在传输信息。

* HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML DOM离不开JavaScript

* DHTML
DHTML 是一种使 HTML 页面具有动态特性的艺术。
DHTML 是一种创建动态和交互 WEB 站点的技术集。
对大多数人来说，DHTML 意味着 HTML、样式表和 JavaScript 的组合。

* AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。
通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。
 

第一个JavaScript实例

[html]
[head]

[/Head]
[/Html]

说明
① 在本例中，JavaScript代码出现在[head] [/head]中，并由标识[Script Language="JavaScript"]…[/Script]说明。除了在head部，JavaScript代码还可以位于 body，以及外部。
② 在”//”后是可被忽略的注释，对大段文本注释，用 /* */ 。

隐藏JavaScript

有些浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签将JavaScript隐藏：

[html][head]
[/head]
[body]

使用外部 JavaScript

[html][head]

[/head]
[body]
[/body][/html]

有如下的表单：

其html是这样的：

你的姓名：

电话号码：

您的意见:
  

并简单地添加些CSS，让它更好看此(如上面的效果):

form {
  width:300px;
  padding:0.3em;
  border:1px solid #CC9999;
  background-color:#FFFFCC;
}
form p{margin:0.2em;padding:0;}
input{width:200px;}

HTML提供了许多有用的元素,可以帮助在表单中添加结构和意义，这些元素是:
fieldset：用来对相关的信息块进行分组。
legend：相当于标题
label：表单标签，该元素可帮助添加结构和增加表单的可访问性。将标签与表单关联起来的方法是：

姓名

这样，将上面的表单基本布局改为这样：

你的留言

    你的姓名： 

  

    电话号码：

  

    您的意见:
    
  

然后，设置样式：

form{width:300px;}
fieldset{
  padding:0.3em;
  border:1px solid #CC9999;
  background-color:#FFFFCC;
}
fieldset p{margin:0.4em;padding:0;}
legend{font-weight:bold;}
input{width:190px;}/*规定宽度是为了在不同的浏览器器表现得一样宽*/
textarea{width:290px;height:3em;}

效果是这样的（FireFox）：

若在CSS中加入这样一条“label{display:block;}”,那么效果会变成下面这样(IE6.0,7.0)，这是因为：将label的display的属性设置为block会使它们产生自己的块框，迫使输入元素转到下一行。当然，如果在label中再加入浮动，也可以解决这个问题。

单选框、复选框和提交按钮

没有加表单元素时，html会是这样：

性别:
男 
女
  
喜欢的水果:
苹果
桔子
芒果
  
喜欢的颜色:

 红
绿
蓝
    

在前面的练习中，为了在不同的浏览器器让文本框表现得一样宽，定义了文本框宽度。但如果表单含有其他表单控件（如单选框、复选框和提交按钮），那么将都会变成190px宽，怎么解决？为它们分配一个类，见下：

你的留言

    你的姓名：

  

    电话号码：

  
性别：
     男 

     女 

  

然后将单选按钮的宽度设置为auto，对于复选框和提交按钮也可以这样做:

input.radio, input.checkbox, input.submit{width:auto;}

让单选按钮左浮动使之与标签放在同一行：

input.radio{float:left;margin-right:1em;}

别以前这样就可以达到你想的效果，不信你看：

解决办法可参考下面的样式，

fieldset p{margin:0.4em;padding:0;}
legend{font-weight:bold;}
label{display:block;float:left;}
input{width:190px;}/*规定宽度是为了在不同的浏览器器表现得一样宽*/
input.radio, input.checkbox, input.submit{width:auto;}
input.radio{float:left;margin-right:1em;}

textarea{width:290px;height:3em;}

.float-l{float:left;}
.margin-r{margin-right:1em;}
.clear{clear:both;}

当然,相应的html也有些变化才行:

性别：
   ......

继续修饰，又经过一些动作，效果更人性化了……

只要将上面的CSS样式添加以下语句：

......
input:focus, textarea:focus{background:#CCFFCC;}
/*上面的,对IE无效*/
input[type="text"],textarea {
  border-top:1px solid #999;
  border-left:1px solid #999;
  border-bottom:1px solid #ccc;
  border-right:1px solid #ccc;
}
.required{font-size:0.85em;
  color:#993333;}

在html上的相应修改如下:

    姓名：(必填)

  

将上面的内容串起来，完成一个较完整的练习：

和前面的几个不同点：
① 没有将label标签设置为block，而是设置一个宽度；
② 为了不让单选按钮间的距离太大，需要单独设置：

  #remember-me label{width:4em;}

完整的代码如下：

form{
  width:25em;}
fieldset{
  margin:1em 0;
  padding:0.5em 0.3em;
  border:1px solid #CC9999;
  background-color:#e5f5e5;
}

fieldset p{margin:0.4em;padding:0;}
legend{font-weight:bold;}
label{width:7em;float:left;}
#remember-me label{width:4em;}
input{width:10em;}
input.radio, input.checkbox, input.submit{width:auto;}
input.radio{float:left;margin-right:1em;}
/*让单选按钮左浮动使之与标签放在同一行:*/

textarea{width:16em;height:4em;}
.clear{clear:both;}

input:focus, textarea:focus{background:#FFFFCC;}

input[type="text"],textarea {
  border-top:1px solid #999;
  border-left:1px solid #999;
  border-bottom:1px solid #ccc;
  border-right:1px solid #ccc;
}
.required{font-size:0.85em;
  color:#993333;}*/

html结构也摆出来吧：

详细联系方式

    姓名：(必填)

  

    邮箱：

  

    网址：

  


留言内容

    您的意见:
    
  


记住我


     是 

     否 

注意： 实际写代码时，需要将上面的pp换成p。
后记：书上还有一个带多列复框的的较复杂的表单布局，详见书109页。

然后，在图像后面添加每个人的网站链接列表。需要给每个列表分配一个类，还可以给每个链接设置title属性。

    丫头
  

    随风
  

【1】设置div 的宽及高，并将position设置为relative，这是关键 …

#pic{
  width:510;height:300;
  position:relative;/*这个关键*/
}

【2】去掉去掉列表前面的符号,将空白和填充设置为0,这一步应该相当熟悉了…

#pic ul{
  margin:0;
  padding:0;
  list-style:none;
}

【3】对锚链接绝对定位(具体位置依图调整)，并用一个大负数作文本编进，让列表从屏幕消失..

#pic a{
  position:absolute;
  width:80px;
  height:100px;
  text-indent:-1000em;
}

现在将各个链接定位在相应的个身上：

#pic .mecho_xiao a{top:45px;left:272px;}
#pic .tograce a{top:18px;left:360px;}

【4】创建翻转效果…

#pic a:hover{border:1px solid #fff;}

区区4小步，就完成了，但很不幸，只有FireFox浏览器才能看到效果:(

flickr风格的图像映射

下面来学习更高级些的图像映射-flickr风格的图像映射。这种效果就是：当鼠标置于图片的任何位置都会出现几个双边框，并且当将鼠标移到边框区内时，会显示相应的说明。

先从创建一层框着手，需要在每个锚链接内部添加1个额外的span，说明也添加一个额外的sapn。这样，列表就会成下面这样：

  


      
        
            丫头
        
      
    

    ......
  

① 与前面一样：设置div 的宽及高，position:relative,且设置margin及padding为0，去掉列表符号

#pic{
  width:510px;height:310px;
  position:relative;/*这个关键*/
}

#pic ul{margin:0;padding:0;list-style:none;}

② 和前面一样，对锚链接绝对定位，但这里不要将链接内容从屏幕消失，给它设置一个颜色，为了避免鼠标停留时出现轻微移动，

给链接设置1px 的透明边框…

#pic a{
  position:absolute;
  width:80px;
  height:100px;
  color:#000;
  text-decoration:none;
  border:1px solid transparent;
}

和前面一样，将各个链接定位在相应的个身上：

#pic .mecho_xiao a{top:45px;left:272px;}
#pic .tograce a{top:18px;left:360px;}

说明:为了调试，可以将上面#pic a 边框任意设置一个颜色

③ 创建边框效果：将outer span设置为块级显示，在设置大小时还要改变大小…

#pic a .outer{
  display:block;
  width:78px;
  height:98px;
  /*border:1px solid #000;开始有，后来去掉*/
}

④ 创建翻转效果：当鼠标停留时，将锚的边框色由透明改为黄色：

#pic a:hover{border-color: #d4d82d;}

说明:此时，当鼠标停留时，有了翻转效果，但只有FireFox的整个框区都翻转，其它的要指在边框上才翻转

⑤ 调整提示的位置，并运用样式：说明note 所对应的span 的位置是absolute，并设置负值的底部值…

#pic a .note{
  position:absolute;
  bottom:-1.8em;
  width:6em;
  padding:0.2em 0.5em;
  background-color:#fcc;
  text-align:center;
}

╋ 将文字提示居中：将span的左边缘定位的框区的中点，然后，使用负的margin将span向左移动说明宽度的一半：

#pic a .note{
  left:40px;
  margin-left:-3.5em;/*【★】说明的总宽度应该是7em(包括填充)*/

⑥ 不希望一直显示边框，而只是鼠标移致图像区域时才出现边框。处理方法:先将#pic a .outer边框 去掉，然后在#pic:hover a .outer中加入边框：

#pic:hover a .outer{
  border:1px solid #000;
}

╋ 不幸的是，IE6只支持锚链接上的鼠标停留。为了解决这个问题，让边框一直显示：

#pic:hover a .outer, #pic a:hover .outer {
  border: 1px solid #000;
}

⑦ 同样的，不希望一直显示提示。为止，可以将display设置为none，然后当鼠标停留在锚链接上时将它改为block。但这样做会使某些屏幕阅读器无法讯问说明的内容。所以这里采用另外的办法：将文本隐藏到左边外，而当鼠标停留时对它重新定位：

#pic a .note{left:-3000px;margin-left:-3.5em;}
#pic a:hover .note{left:40px;}

⑧ 再加一层框：还需要加上一层span…

#pic a .inner{
  display:block;
  width:76px;
  height:96px;
}
#pic:hover a .inner{border:1px solid #fff;}
#pic:hover a .inner, #pic a:hover .inner{
  border:1px solid #fff;}

这就是你想要的结果：一个flickr风格的高级CSS图像映射。

最后，将整个过程稍微整理一下，html结构如下：

    
    
      
        丫头
      
    
    
  

......

CSS整理如下：

#pic{
  width:510px;height:310px;
  position:relative;/*这个关键*/
}
#pic ul{margin:0;padding:0;list-style:none;}

/* ⊙ 对锚链接绝对定位------*/
#pic a{
  position:absolute;
  width:80px;
  height:100px;
  color:#000;
  text-decoration:none;
  border:1px solid transparent;
  /*为了避免鼠标停留时出现轻微移动*/
}
  /*将各个链接定位在相应的个身上:*/
#pic .mecho_xiao a{top:45px;left:272px;}
#pic .tograce a{top:18px;left:360px;}
/*！为了调试，可以将上面#pic a 边框任意设置一个色*/

/*⊙ 创建边框效果------*/
#pic a .outer{
  display:block;
  width:78px;
  height:98px;
}
#pic a .inner{
  display:block;
  width:76px;
  height:96px;
}

/* ⊙ 创建翻转效果------*/
#pic a:hover{border-color: #d4d82d;}

/* ⊙ 调整提示的位置，并运用样式:------*/
#pic a .note{
  position:absolute;
  bottom:-1.8em;
  width:6em;
  padding:0.2em 0.5em;
  background-color:#fcc;
  text-align:center;
  left:-3000px;
  margin-left:-3.5em;
 /*让文本居中显示，【★】说明的宽度是7em(包括填充)*/
}
#pic a:hover .note{
  left:40px;
}

/* ⊙ 边框显示控制------*/
#pic:hover a .outer{border:1px solid #000;}
#pic:hover a .inner{border:1px solid #fff;}
/* ⊙ IE6只支持锚链接上的鼠标停留。为了解决这个问题，让边框一直显示-----*/
#pic:hover a .outer, #pic a:hover .outer {
  border: 1px solid #000;}
#pic:hover a .inner, #pic a:hover .inner{
  border:1px solid #fff;}

后记：与前面简单的图像映射效果比较，这个flickr风格的高级CSS图像映射效果在各个浏览器都能看到效果，仍旧属在FireFox表现最完美，在IE7.0中，只有当鼠标放置于边框上才出现提示，（在IE6.0中的表现更差），而对于Opera9.2 ，只有当鼠标放置于上边框和左边框时才出现提示。

这种带圆角框的标签式导航条的作法是：用一个右对齐的大图像和一个左对齐侧边图像，侧边图像盖在大图像左边，这样就实现了两个顶角是圆角创建标签页效果，并且，宽度可随着文字多少而展开。
和前面的水平导航条一样，先写出列表的HTML结构：

HOME
ABOUT
NEWS
PRODUCTS
SERVICES
CLIENTS
CASE STUDIES

【0】仍旧先在最前面设置全局字体

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1em;
}/*------*/

【1】和前面一样，去掉去掉列表前面的符号，将空白和填充设置为0 ，并设置整个导航条宽度720px。让导航条左浮动以便包含内部的浮动元素：

ul{
  /*因IE和Opera使用左空白控制列表缩进，而Firefox使用左填充，
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style:none;
  width:720px;
  float:left;/*让导航条左浮动以便包含内部的浮动元素*/
}

【2】纵队变横队，并添加右圆角背景图。
在前面的水平导航条实例中，将整个渐变的背景图置于ul中，但这里显然不行，将右圆角背景图放置在li内，并将它右对齐：

ul li{
  float:left;
  background:url(images/tab-right.gif) no-repeat top right;
}

【3】上回就要你们分开点，怎么又挨那么紧,分开！分开！还有，别忘记将链接按钮化（display:block）,并使用行高让文本垂直居中…

li a{/*这里写 ul a是一样的*/
  padding:0 1.5em;
  display:block;
  text-decoration:none;
  line-height:2em;
  color:#fff;
}

【4】制造左边圆角效果：将侧边图置于a内，并左对齐就OK了…

li a{
  background:url(images/tab_left.gif) no-repeat top left;
}

【5】最后加上翻转效果。以及为了让Mac 上的IE5.2也能正确显示，仍旧对锚浮动…

li a{
  float:left;/*For IE5.2/Mac*/
}
ul a:hover{
  color:#333;
}

怎么样，不错吧，三下五除二,一个漂亮的水平标签式导航条就出来了：）
为了规范，将代码稍微整理一下，如下所示：

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans",
     "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1em;
}

ul{
  /*因IE和Opera使用左空白控制列表缩进，而Firefox使用左填充，
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style:none;
  width:720px;
  float:left;/*让导航条左浮动以便包含内部的浮动元素*/
}/*------*/

ul li{
  float:left;/*纵队变横队*/
  background:url(images/tab-right.gif) no-repeat top right;
}

li a{/*这里写 ul a是一样的*/
  padding:0 1.5em;
  display:block;
  text-decoration:none;
  line-height:2em;
  color:#fff;
  background:url(images/tab-left.gif)
     no-repeat top left;/*左圆角框背景*/
  float:left; /*For IE5.2(Mac)*/
}

ul a:hover{color:#333;}

HOME
ABOUT
NEWS
PRODUCTS
SERVICES
CLIENTS
CASE STUDIES

【0】最前面设置全局字体

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1em;
}/*------*/

【1】去掉去掉列表前面的符号，将空白和填充设置为0 ……

ul{
  /*因IE和Opera使用左空白控制列表缩进，而Firefox使用左填充，
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style:none;
}

【2】希望水平导航条宽800px，且背景是那种漂亮的渐变效果…

ul{
  margin:0;
  padding:0;
  list-style:none;
  width:800px;
  background:#FAA819 url(images/mainNavBg.gif) repeat-x;
  /*上面的背景图定位置时，完整的应是：repeat-x top left；省去了top left*/
}

【3】纵队变横队:)…

ul li{
  float:left;
}

【4】千万记得这招人又爱又恨的”浮动”，里面”浮动”，让外面也”浮动”:)…

ul{
  float:left;
}

【5】挨那么紧干嘛，分开点，分开点:)…

ul a{
  padding:0 1em;
  text-decoration:none;
  color:#fff;
}

【6】将链接按钮化，别忘记用display：block，并使用行高让文本垂直居中…

ul a{
  display:block;
  line-height:2em;
}

【7】各位听好了，我指向谁，谁就转过去，看看你背后的图案…

ul a:hover{
  background:#60c072 url(images/mainNavBg_hover.gif) repeat-x;
  color:#333;
}

【8】进一步美化，在导航条的每个链接间加入一条细分隔线(首个链接前不需要)…

ul a{
  background:url(images/divider.gif) repeat-y left top;
}
ul .first a{background:none;}

ul a:hover{
  background:#60c072 url(images/mainNavBg_hover.gif) repeat-x;
}

【9】最后一点，为了让Mac 上的IE5.2也能正确显示…

ul a{
  float:left;/*For IE5.2/Mac*/
}

就这样，一步步下来，一个漂亮的水平导航条以及翻转效果就出来了。
为了规范，将代码稍微整理一下，如下所示：

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
    "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1em;
}/*------*/

ul{
  margin:0;
  padding:0;
  float:left;
  list-style:none;
  width:800px;
  background:#FAA819 url(images/mainNavBg.gif)
  repeat-x /*其实省去了top left*/;
}

ul li{ float:left;/*【3】纵队变横队:) */}
ul a{
  padding:0 1.5em;/*使用左右padding，每个按钮的宽度将由文本数量决定*/
  text-decoration:none;
  display:block;
  line-height:2em;
  color:#fff;
  float:left;/*For IE5.2(Mac)*/
  background:url(images/divider.gif)
    repeat-y left top;/*分隔线*/
}
ul .first a{background:none;}/*首个左边不需要分隔线*/
ul a:hover{
  background:#60c072 url(images/mainNavBg_hover.gif)
    repeat-x;/*漂亮的翻转*/
  color:#333;
}

Home
About
News
Contact

通过寻找以下ID和类名的组合，就会突出显示当前页面 ……

#home #mainNav .home a,
#about #mainNav .about a,
#news #mainNav .news a,
#contact #mainNav .contact a{
  background-position:right bottom;
  color:#fff;
  cursor:default;
}

Home
About
News
Contact

【1】去掉去掉列表前面的符号并且将空白和填充设置为0 …

ul{
  /*因IE和Opera使用左空白控制列表缩进,而Firefox使用左填充,
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style-type:none;
}

【2】将链接按钮化，所以需要将锚的display属性设置为block，并指定按钮的宽及高

ul a{
  display:block;
  width:200px;
  height:40px;
  line-height:40px;
  color:#000;
  text-decoration:none;
}

【3】用Pixy翻转技术,实现按钮翻转效果
这种技术就是将按钮的正常状态和鼠标停留状态背景图置于一张图,然后采用不同的对齐方法:

ul a{
  background:#94B8E9 url(images/pixy-rollover.gif)
 no-repeat left center;
  text-indent:50px;/*露出背景图左边的箭头*/
}
a:hover{
  background-position: right center;
  color:#fff;
}

【4】取消相邻方框间的粗边线
因为背景囫有边框,当两个按钮垂直排列时,就会出现双重边线。解决的办法是将高度减少1px,并将图片用下对齐：

ul a{
  height:39px;
  line-height:39px;
  background-position: left bottom;
}
a:hover{background-position: right bottom;}
/*但同时最顶部就没有边线了,需要将它补上 -----*/
li.first a{height:40px;line-height:40px;}
/*------*/

【5】进一步美化，如字体的样式及大小，通常将这一步放置于最前面

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1.4em;
}/*------*/

就这样,一步步下来,一个漂亮的垂直导航条以及翻转效果就出来了。
最后，将代码稍微整理一下，如下所示：

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1.4em;
}
ul{
  /*因IE和Opera使用左空白控制列表缩进,而Firefox使用左填充,
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style-type:none;
}
ul a{
  display:block;
  width:200px;
  height:39px;
  line-height:39px;
  color:#000;
  text-decoration:none;
  background:#94B8E9 url(images/pixy-rollover.gif)
  no-repeat left bottom;
  text-indent:50px;/*露出背景图左边的箭头*/
}
li.first a{height:40px;line-height:40px;}
a:hover{
  background-position: right bottom;color:#fff;
}