ASP与数据库

 ASP与数据库运用：密码验证 
　　　　　　　　Microsoft 的大作ASP(Active Server 
　　　　　　Pages)以其易学易用、扩充性好、功能多而强等优点正掀起一场新的web编程革命(从严格意义上讲，编写asp并不是编程)，它以令人吃惊的发展和普及速度大有取代由perl等语言编写的CGI(Common 
　　　　　　Gateway Interface,通用网关接口) 的势头。基于web 
　　　　　　page方式的web管理模式已经成为潮流，看看现在的网管们，有谁不会asp的编写呢？要管理？那你可能就要用到我这里要说的“密码验证”了。简单地说，密码验证就是首先判断你是不是有登录权限，如果有，就继续，否则，哼哼……。什么？你到现在还不知道ASP是什么东东？“该程序执行了非法操作，即将被关闭。如仍有问题，请与程序供应商联系。”----------系统语
　　　　　　　　下面，我们就来看看实现密码验证的ASP需要些什么吧。
　　　　　　　　一、 ASP运行环境：
　　　　　　　　Windows 95/98单机平台：PWS (Personal Web Server)4.0 、windows NT 
　　　　　　4.0/5.0服务器平台：IIS(Internet Information Server )Service Pack 3 及其以上版本)
　　　　　　　　NT workstation 4.0 工作站平台：PWS(Personal Web Server )NT 
　　　　　　workstation版及最新版的IE浏览器。
　　　　　　　　二、 用于制作ASP的软件
　　　　　　　　Windows FrontPage 98/2000 、Dreamweaver 3.0 ，如果这些软件你都没有，那你就用windows 
　　　　　　中的Notepad 
　　　　　　当一次“代码编写狂”吧。不过ASP中很多代码仍是需要我们手工编写大量代码的，用专用的网页制作软件只不过是偷一丁点懒而已。
　　　　　　　　三、 用哪一种数据库作为储存用户资料(用户名及密码)的数据库呢？
　　　　　　　　SQL Server、Microsoft Access 
　　　　　　97/2000等都可以。本人建议你使用Access，因为你可能对它比较熟悉，一旦有问题，解决起来比较容易，更深的原因是：Microsoft 
　　　　　　Access相对于其它非服务器等级的数据库执行的效率要高得多。
　　　　　　　　好了，废话说了这么多，可能你早已经不耐烦了。不过，这对于一些ASP的初学者可能还是有帮助的，对于这部分读者，你们可能还得要看看关于ASP方面的书籍或网站来增加你对ASP基本语法的了解。
　　　　　　　　让我们一步一步来做这个密码验证吧，我采用的是Windows 98 + PWS 4.0平台，IE 
　　　　　　5.0浏览器，网页制作软件：FrontPage 2000. Go!
　　　　　　　　一、创建用户密码数据库
　　　　　　　　先用Access建立一个用户密码数据库，建立字段名id和psd,并添加值.如:id的值我设为：admin，psd的值为：www，当然，你还可以继续添加用户id及psd,完成后保存为：psd.mdb。
　　　　　　　　二、编写psd.asp(用户登录界面页，完成验证的功臣就是它了)及log.asp(成功登录后显示的页面)。在编写之前，我们来分析一下常见的用户登录界面，比如说你想收取基于web 
　　　　　　page方式免费邮件箱的登录界面：管理用户登录的文件名常常为log.*,开始登录时是这个文件，登录完成后浏览器的地址栏中还是显示的这个文件名，这是怎么回事儿呢？用ASP的方法来讲，原来，用户登录的文件被包含在登录完成后的文件中。以我现在要讲的这个例子来说，psd.asp就是被包含在log.asp中了。用户登录时看到的文件名将是：log.asp，而log.asp要求系统先执行psd.asp，通过验证之后才看到真正的log.asp网页。对了！实际上密码验证的关键在psd.asp。在你读完本文后，你会深深体会这一点。既然psd.asp文件是关键，那我们就先来看看psd.asp是怎么写的。
　　　　　　　　运行FrontPage新建一个文件，并保存为：psd.asp(在FrontPage 的保存类型中选取“Active Server 
　　　　　　Pages”)。在FrontPage 
　　　　　　左下角选取“HTML”先在它的顶部进行ASP源代码的编写，内容如下(以下源代码中凡出现“‘……”的均为注释)： 
　　　　　　　　%
　　　　　　　　function checkPwd(id,psd) '检测用户id及密码
　　　　　　　　dim conn,param,rs 
　　　　　　　　set conn=server.createobject("adodb.connection") '创建数据库连接对象conn
　　　　　　　　param="driver={microsoft access driver (*.mdb)}" 
　　　　　　‘指定数据库驱动程序，不可省略写为“access diver(*.mdb)”
　　　　　　　　conn.open param  ";dbq="  server.mappath("psd.mdb") 
　　　　　　'用指定的数据库驱动程序打开数据库，并指定数据路径
　　　　　　　　sql="select*from psd where id='"  id  "' and psd='"  psd  "'" 
　　　　　　‘定义sql从数据库中读取id及psd的值,本行中的第一个psd是指数据库名，以后的psd是指psd.mdb中的psd字段。
　　　　　　　　set rs=conn.execute(sql) '打开数据库
　　　　　　　　if rs.eof then 
　　　　　　　　checkpwd=false 
　　　　　　　　else 
　　　　　　　　checkpwd=true 
　　　　　　　　end if 
　　　　　　　　end function 
　　　　　　‘以上几句判断是否已经读完数据库中的记录，如果没有，就向后读，如果已经完成，则验证用户名及密码。如果验证通过，则为true,反之为flase
　　　　　　　　%> 
　　　　　　　　% 
　　　　　　　　if isEmpty(session("passed")) then session("passed")=false 
　　　　　　'判断用户输入信息 
　　　　　　　　id=request("id") ‘获取用户id(用户名)
　　　　　　　　psd=request("psd") ‘获取用户psd(密码)
　　　　　　　　if id="" or psd="" then 
　　　　　　　　response.write"请输入您的登录名及密码。" '如果用户没有输入完整的信息，返回出错信息。 
　　　　　　　　elseif not checkpwd(id,psd) then 
　　　　　　　　response.write"用户名或密码错误！br>请检查你的用户名及密码然后再试一次！" 
　　　　　　‘如果用户已经输入完整信息，但输入错误也返回出错信息。
　　　　　　　　else session("passed")=true 
　　　　　　　　end if
　　　　　　　　if not session("passed") then%> 
　　　　　　‘用户输入的信息完全正确并验证通过，以下开始编写html代码，做一个用户登录界面。
　　　　　　　　html>
　　　　　　　　head>
　　　　　　　　meta http-equiv="Content-Type" content="text/html; 
　　　　　　charset=gb2312">
　　　　　　　　title>请您输入您的用户名及密码！/title>
　　　　　　　　/head>
　　　　　　　　body bgcolor="#000000" text="#FFFFFF">
　　　　　　　　p align="center">　 
　　　　　　　　p align="center">　/p> 
　　　　　　　　p align="center">b>font face="黑体" 
　　　　　　size="6">用户登录首页/font>/b>/p> 
　　　　　　　　p align="center">　/p> 
　　　　　　　　form method="POST" 
　　　　　　action="%=request.serverVariables("psd.mdb")%>"> 
　　　　　　　　table border="0" width="100%" cellspacing="0" cellpadding="0"> 
　　　　　　　　tr> 
　　　　　　　　td width="41%" align="right">用户名:/td> 
　　　　　　　　td width="59%">input type="text" name="id" size="20" 
　　　　　　value="%=id%>">/td> 
　　　　　　　　/tr> 
　　　　　　　　tr> 
　　　　　　　　td width="41%" align="right">　密 码：/td> 
　　　　　　　　td width="59%">input type="password" name="psd" size="20" 
　　　　　　value="%=psd%>">/td> 
　　　　　　　　/tr> 
　　　　　　　　tr> 
　　　　　　　　td width="41%">　/td> 
　　　　　　　　td width="59%">　/td> 
　　　　　　　　/tr> 
　　　　　　　　/table> 
　　　　　　　　p align="center">input type="submit" value="提交" name="B1">input 
　　　　　　type="reset" value="清除" name="B1">/p> 
　　　　　　　　/form> 
　　　　　　　　%response.end 
　　　　　　　　end if %> ‘验证过程结束，进入加密网页。
　　　　　　　　/body> 
　　　　　　　　/html> 
　　　　　　　　完成了psd.asp的编写，可能你早已经迫不及待地想知道log.asp怎么编写了吧。让我们继续吧！
　　　　　　　　Log.asp的内容：
　　　　　　　　!--#include file="psd.asp"--> 
　　　　　　‘在log.asp源代码中的顶部输入这句,作用就是在系统执行log.asp之前先执行psd.asp啦！
　　　　　　　　html>
　　　　　　　　head>
　　　　　　　　title>用户验证通过，您已经成功登录系统/title>
　　　　　　　　/head>
　　　　　　　　body>center>p>p>p>p>用户验证通过，您已经成功登录！br>
　　　　　　　　现在你可以进行你想要的操作了。如果你有什么问题，请来信Emaila 
　　　　　　href="mailto:kanwo@163.net?subject=问你几个关于密码验证的问题">kanwo@163.net/a>/center>
　　　　　　　　/body>
　　　　　　　　/html>
　　　　　　　　呵呵……手写了这么多，还受得了吧。你在编写完成之后，可以移植到其它平台上，比如Windows 
　　　　　　NT。最后，将你做的这两个asp文件及psd.mdb数据库放在同一个目录下(该目录必须在PWS或IIS中有www服务)，比如:c:\inetpub\wwwroot\。然后，在确保你的PWS或IIS在运行的情况下，在你们IE浏览器的地址栏中输入http://127.0.0.1/log.asp，看看，会有什么！(如果你在登录过程中听到你的硬盘在响，可别吓着了哟！)

 


q 文 章 点 评       3 篇


>>上篇文章:ASP技术访问WEB数据库  
>>下篇文章:制作有管理功能的ASP留言板  



 

第三招：控制你的弹出窗口只弹出一次（如果每进一次，刷新一次就弹出你不觉得很烦和麻烦吗？）有什么好的办法吗？
那是当然的啊，我们现在只要使用cookie来控制就能实现这样的要求了。
首先，你需把将如下代码加入到页面HTML的＜HEAD>和＜/HEAD>之间：

＜script＞
．function openwin(){
．window.open("pop1.html","","width=120,height=240")
．}
．function get_cookie(Name) {
．var search = Name + "="
．var returnvalue = "";
．if (document.cookie.length ＞ 0) {
．offset = document.cookie.indexOf(search)
．if (offset != -1) {
．offset += search.length
．end = document.cookie.indexOf(";", offset);
．if (end == -1)
．end = document.cookie.length;
．returnvalue=unescape(document.cookie.substring(offset, end))
． }
． }
．return returnvalue;
． }
．function loadpopup(){ //*控制弹出窗口的函数哟，你要使用他的啊
．if (get_cookie('popped')==''){
．openwin()
．document.cookie="popped=yes"
． }
．}
．//--＞
＜/script>

　然后，用＜body onload="loadpopup()">替换页面中原来的＜BODY>这一句就行的了。


》》》》》》》》》》》》》》》》》》》》》》----------------------------------
在提交帖之后:
%
if Response.Cookies("time")>"" then
  if DateDiff('s',Response.Cookies("time"),now())20   '隔20s才能再发帖
    Response.Write "script>alert('不能频繁发帖');window.location=history.go(-1)/script>"
    response.End
  end if
end if
Response.Cookies("time")=now()
……             '将帖子入库
----------------------------------------------------------

                    ASP项目中的公共翻页模块:

在大型的ASP项目中，很多的页面都涉及到翻页功能。如果每个页面都写一个翻页的程序的话，这样的工作即降低了工作效率，也不利于工程的模块化，不能使代码重用。因此，把翻页这样的功能模块化是很有必要的。
设计方法： 
1、调用该模块时，只需要传递记录集和每页显示的记录的条数； 
2、可以点击链接进行翻页，也可以直接输入页码，回车后翻页； 
3、不要考虑文件名，程序的每次翻页都能在当前页面。 
想清楚了上面3个问题，我们的公共翻页模块就可以动手了。 
% 
'+++++++++++++++++++++++++++++++++++++ 
'◆模块名称： 公共翻页模块 
'◆文 件 名： TurnPage.asp 
'◆传入参数： Rs_tmp (记录集), PageSize (每页显示的记录条数) 
'◆输 出： 记录集翻页显示功能 
'+++++++++++++++++++++++++++++++++++++ 
' 
Sub TurnPage(ByRef Rs_tmp,PageSize) 'Rs_tmp 记录集  PageSize 每页显示的记录条数; 
Dim TotalPage '总页数 
Dim PageNo '当前显示的是第几页 
Dim RecordCount '总记录条数 
Rs_tmp.PageSize = PageSize 
RecordCount = Rs_tmp.RecordCount 
TotalPage = INT(RecordCount / PageSize * -1)*-1 
PageNo = Request.QueryString ("PageNo") 
'直接输入页数跳转； 
If Request.Form("PageNo")>"" Then PageNo = Request.Form("PageNo") 
'如果没有选择第几页，则默认显示第一页； 
If PageNo = "" then PageNo = 1 
If RecordCount > 0 then 
Rs_tmp.AbsolutePage = PageNo 
End If 

'获取当前文件名，使得每次翻页都在当前页面进行； 
Dim fileName,postion 
fileName = Request.ServerVariables("script_name") 
postion = InstrRev(fileName,"/")+1 
'取得当前的文件名称，使翻页的链接指向当前文件； 
fileName = Mid(fileName,postion) 
%> 
table border=0 width='100%'> 
tr> 
td align=left> 总页数：font color=#ff3333>%=TotalPage%>/font>页 
  当前第font color=#ff3333>%=PageNo%>/font>页/td> 
td align="right"> 
%If RecordCount = 0 or TotalPage = 1 Then 
Response.Write "首页|前页|后页|末页" 
Else%> 
a href="%=fileName%>?PageNo=1">首页|/a> 
%If PageNo - 1 = 0 Then 
Response.Write "前页|" 
Else%> 
a href="%=fileName%>?PageNo=%=PageNo-1%>">前页|/a> 
%End If 

If PageNo+1 > TotalPage Then 
Response.Write "后页|" 
Else%> 
a href="%=fileName%>?PageNo=%=PageNo+1%>">后页|/a> 
%End If%> 

a href="%=fileName%>?PageNo=%=TotalPage%>">末页/a> 
%End If%>/td> 
td width=95>转到第 
%If TotalPage = 1 Then%> 
input type=text name=PageNo size=3 readonly disabled style="background:#d3d3d3"> 
%Else%> 
input type=text name=PageNo size=3 value="" title=请输入页号,然后回车> 
%End If%>页 
/td> 
/tr> 
/table> 
%End Sub%> 

当然，大家可以把翻页的链接做成图片按钮，这样的话也面就更加美观了。 

调用方法: 
1、在程序开始或要使用翻页的地方包含翻页模块文件； 
2、定义变量：RowCount，每页显示的记录条数 
3、调用翻页过程：Call TurnPage(记录集,RowCount) 
4、在Do While 循环输出记录集的条件中加上" RowCount > 0 " 条件 
5、在循环结束 "Loop前" 加上： RowCount = RowCount - 1 

'----------------------------------------------------- 
调用范例： 
文件名：News.asp 

% 
Dim Conn，Rs_News 
Set Conn = server.CreateObject("ADODB.CONNECTION") 
Conn.Open "cpm","cpm","cpm" 

Dim Sql 
Sql = "Select * from News" 
Set Rs_News = Server.CreateObject("ADODB.RECORDSET") 
Rs_News.Open Sql,Conn,1,3 '获取的记录集 

'公共翻页模块开始%> 
!--#include file=../Public/TurnPage.asp--> 
% 
Dim RowCount 
RowCount = 10 '每页显示的记录条数 
Call TurnPage(Rs_News,RowCount) 
'公共翻页模块结束%> 

table width=100%> 
tr> 
td>新闻编号/td> 
td>新闻标题/td> 
td>发布日期/td> 
tr> 
% 
If Not Rs_News.eof 
Do while Not Rs_News.eof and RowCount>0 
%> 
tr> 
td>%=Rs_News("ID")%>/td> 
td>%=Rs_News("Name")%>/td> 
td>%=Rs_News("Date")%>/td> 
tr> 
% 
RowCount = RowCount - 1 
Rs_News.MoveNext 
Loop 
End If 
%>  
（出处：www.dev-club.com）

 
 --------------------------------------------------------------------
 在提交帖之后:
%
if Response.Cookies("time")>"" then
  if DateDiff('s',Response.Cookies("time"),now())20   '隔20s才能再发帖
    Response.Write "script>alert('不能频繁发帖');window.location=history.go(-1)/script>"
    response.End
  end if
end if
Response.Cookies("time")=now()
……             '将帖子入库


---------------------------------
怎样去除执行window.close()后弹出的‘是否关闭窗口'对话框

self.opener=null;
self.close();
但是只能在IE5.5  或IE6.0上用

最小化、最大化、关闭窗口
object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
param name="Command" value="Minimize">/object>
object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
param name="Command" value="Maximize">/object>
OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
PARAM NAME="Command" value="Close">/OBJECT>
-------------------------------------------------------
我的下拉框中又两个选项，当选择第一个时，出现一个用户输入页面，但是有一部分input框是不要用户填写的。当选择第二项时，出现地页面是全部都要填写的。不知道该如何实现？
select onchange="text1.disabled=this.selectedIndex==0">
option>False/option>
option>True/option>
/select>
input type=text id=text1 disabled>
------------------------------------------------------------------>>>>>>>>>>>>>>
我的目的是:打开一个web页(就称为'原页' 吧)，点击一个按钮弹出一个小窗口(原页不关，小窗口最好可以拖动)，在小窗口里提交一个表单到原页。有什么方法可以实现？
给『原页』一个name属性，表单的target指向它
script>
this.name = "bencalie";
newwin = window.open("","","width=400,height=200");
newwin.document.write("form action='test.cgi' target='bencalie'>input type=submit>/form>");
/script>

==============================================
没有边框的窗口：：；；；；

HTML  XMLNS:IE>
meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">
IE:Download  ID="include"  STYLE="behavior:url(#default#download)"  />
title>Chromeless  Window/title>

SCRIPT  LANGUAGE="JScript">
/*---  Special  Thanks  For  andot  ---*/

/*
  This  following  code  are  designed  and  writen  by  Windy_sk  seasonx@163.net>
  You  can  use  it  freely,  but  u  must  held  all  the  copyright  items!
*/

/*---  Thanks  For  andot  Again  ---*/

var  CW_width =  400;
var  CW_height =  300;
var  CW_top =  100;
var  CW_left =  100;
var  CW_url =  "http://www.cnbruce.com/bluebook/";
var  New_CW =  window.createPopup();
var  CW_Body =  New_CW.document.body;
var  content =  "";
var  CSStext =  "margin:1px;color:black;  border:2px  outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'},  onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//Build  Window
include.startDownload(CW_url,  function(source){content=source});

function  insert_content(){
 var  temp  =  "";
 CW_Body.style.overflow  =  "hidden";
 CW_Body.style.backgroundColor =  "white";
 CW_Body.style.border  =    "solid  black  1px";
 content  =  content.replace(/a  ([^>]*)>/g,"a  onclick='parent.open(this.href);return  false'  $1>");
 temp  +=  "table  width=100%  height=100%  cellpadding=0  cellspacing=0  border=0>";
 temp  +=  "tr  style=';font-size:12px;background:#0099CC;height:20;cursor:default'  ondblclick=\"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\"  onmouseup='parent.drag_up(event)'  onmousemove='parent.drag_move(event)'  onmousedown='parent.drag_down(event)'  onselectstart='return  false'  oncontextmenu='return  false'>";
 temp  +=  "td  style='color:#ffffff;padding-left:5px'>Chromeless  Window  For  IE6  SP1/td>";
 temp  +=  "td  style='color:#ffffff;padding-right:5px;'  align=right>";
 temp  +=  "span  id=Help    onclick=\"alert('Chromeless  Window  For  IE6  SP1    -    Ver  1.0\\n\\nCode  By  Windy_sk\\n\\nSpecial  Thanks  For  andot')\"  style=\""+CSStext+"font-family:System;padding-right:2px;\">?/span>";
 temp  +=  "span  id=Min      onclick='parent.New_CW.hide();parent.blur()'  style=\""+CSStext+"font-family:Webdings;\"  title='Minimum'>0/span>";
 temp  +=  "span  id=Max      onclick=\"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\"  style=\""+CSStext+"font-family:Webdings;\"  title='Maximum'>1/span>";
 temp  +=  "span  id=Close  onclick='parent.opener=null;parent.close()'  style=\""+CSStext+"font-family:System;padding-right:2px;\"  title='Close'>x/span>";
 temp  +=  "/td>/tr>tr>td  colspan=2>";
 temp  +=  "div  id=include  style='overflow:scroll;overflow-x:hidden;overflow-y:auto;  HEIGHT:  100%;  width:"+CW_width+"'>";
 temp  +=  content;
 temp  +=  "/div>";
 temp  +=  "/td>/tr>/table>";
 CW_Body.innerHTML  =  temp;
}

setTimeout("insert_content()",1000);

var  if_max  =  true;
function  show_CW(){
 window.moveTo(10000,  10000);
 if(if_max){
  New_CW.show(CW_top,  CW_left,  CW_width,  CW_height);
  if(typeof(New_CW.document.all.include)!="undefined"){
   New_CW.document.all.include.style.width  =  CW_width;
   New_CW.document.all.Max.innerText  =  "1";
  }

 }else{
  New_CW.show(0,  0,  screen.width,  screen.height);
  New_CW.document.all.include.style.width  =  screen.width;
 }
}

window.onfocus    =  show_CW;
window.onresize  =  show_CW;

//  Move  Window
var  drag_x,drag_y,draging=false

function  drag_move(e){
 if  (draging){
  New_CW.show(e.screenX-drag_x,  e.screenY-drag_y,  CW_width,  CW_height);
  return  false;
 }
}

function  drag_down(e){
 if(e.button==2)return;
 if(New_CW.document.body.offsetWidth==screen.width    New_CW.document.body.offsetHeight==screen.height)return;
 drag_x=e.clientX;
 drag_y=e.clientY;
 draging=true;
 e.srcElement.setCapture();
}

function  drag_up(e){
 draging=false;
 e.srcElement.releaseCapture();
 if(New_CW.document.body.offsetWidth==screen.width    New_CW.document.body.offsetHeight==screen.height)  return;
 CW_top    =  e.screenX-drag_x;
 CW_left  =  e.screenY-drag_y;
}

/SCRIPT>
/HTML>
============================================================>>>>>>>>>>>>>>>>>>>>>


还有图片的“黑白转彩色”
SCRIPT>
function  doTrans(filterCode)  
{
imgObj.filters[0].apply();
oImg.style.filter  =  filterCode
imgObj.filters[0].play();
}
/SCRIPT>

SPAN  id=imgObj  
onmouseleave='doTrans("gray")'  
style="FILTER:  progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);  WIDTH:  1px"  
onmouseenter='doTrans("")'>
IMG  id=oImg  style="FILTER:  gray"  src="http://www.cnbruce.com/images/cnrose/a.gif">  
/SPAN>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
模拟office菜单:::
:::::::::::::
style  type="text/css">
*  {  font-size:  12px;  }
body  {  margin:  0px;  }
/style>

script  language="JavaScript">
//  Office  XP  菜单

var  sub_display  =  false;

//  颜色数组说明：此数组储存菜单各部份颜色样式，可以改变颜色值达到改变样式的效果
//  值依次为：高亮背景色,  高亮边框色,  菜单栏背景色,  子菜单背景色,  子菜单边框色,  子菜单标题色,  子菜单阴影色

var  color  =  ['#B6BDD2',  '#0A246A',  '#D4D0C8',  '#F8F8F8',  '#666666',  '#DBD8D1',  '#DDDDDD'];

//  菜单数组说明：此数组储存各菜单数据
//  值依次为：
//  1.  主菜单名称,  下拉菜单右延空白长度
//  2.  第1个子菜单名称,  链接地址
//  3.  第2个子菜单名称,  链接地址
//  4.  ......

var  menu  =  new  Array();
menu[0]  =  [['菜单一',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];
menu[1]  =  [['菜单二',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];
menu[2]  =  [['菜单三',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];
menu[3]  =  [['菜单四',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];
menu[4]  =  [['菜单五',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];
menu[5]  =  [['菜单六',  50],  ['1111',  '1.htm'],  ['2222',  '2.htm'],  ['3333',  '3.htm']];


document.write('table  width="100%"  cellspacing="0"  cellpadding="0"  style="background-color:  '  +  color[2]  +  ';  border-left:  1px  #F4F4F4  solid;  border-top:  1px  #F4F4F4  solid;  border-right:  1px  #999999  solid;  border-bottom:  1px  #999999  solid;"  onSelectStart="return  false;"  onContextMenu="return  false;">tr>td  width="5">img  width="5"  height="1">/td>td>table  cellspacing="0"  cellpadding="2">tr>');
for  (var  i=0;  imenu.length;  i++)
document.write('td  style="border:  1px  '  +  color[2]  +  '  solid;  cursor:  default;"  onClick="Menu_Click(this,  '  +  i  +  ')"  onMouseOver="Menu_Over(this,  '  +  i  +  ')"  onMouseOut="Menu_Out(this,  '  +  i  +  ')">nobr>img  width="10"  height="1">'  +  menu[i][0][0]  +  'img  width="10"  height="1">/nobr>/td>');
document.write('/td>/tr>/table>/tr>/table>');

for  (var  i=0;  imenu.length;  i++)  {
        document.write('table  id="subMenu"  cellspacing="0"  cellpadding="0"  onSelectStart="return  false;"  onContextMenu="return  false;"  style="position:  absolute;  display:  none;  top:  1px;  border-left:  1px  '  +  color[4]  +  '  solid;  border-bottom:  1px  '  +  color[4]  +  '  solid;  cursor:  default;  filter:progid:dximagetransform.microsoft.dropshadow(color='  +  color[6]  +  ',offx=3,offy=3,positive=true)">tr>td  style="border-top:  1px  '  +  color[4]  +  '  solid;  border-right:  1px  '  +  color[4]  +  '  solid;  background-color:  '  +  color[5]  +  ';"  onClick="subMenu_Hide(false)">nobr>img  width="1"  height="2">br>img  width="12"  height="1">'  +  menu[i][0][0]  +  'img  width="12"  height="1">br>img  width="1"  height="3">/nobr>/td>td  style="border-bottom:  1px  '  +  color[4]  +  '  solid;"  onMouseOver="subMenu_Hide(true)">img  width="'  +  menu[i][0][1]  +  '"  height="1">/td>/tr>tr>td  colspan="2"  style="border-right:  1px  '  +  color[4]  +  '  solid;  background-color:  '  +  color[3]  +  ';">table  width="100%"  cellspacing="1"  cellpadding="2"  style="  background-color:  '  +  color[3]  +  '">');
        for  (var  j=1;  jmenu[i].length;  j++)
        document.write('tr>td  style="border:  1px  '  +  color[3]  +  '  solid;"  onMouseOver="subMenu_Over(this)"  onMouseOut="subMenu_Out(this)"  onClick="location.href=\''  +  menu[i][j][1]  +  ''">nobr>nbsp;'  +  menu[i][j][0]  +  '/nobr>/td>/tr>');
        document.write('/td>/tr>/table>/td>/tr>/table>');
}

function  Menu_Over(obj,  s)  {
        if  (sub_display)  {
                subMenu_Show(obj,  s)
        }
        else  {
                obj.style.backgroundColor  =  color[0];
                obj.style.border  =  '1px  '  +  color[1]  +  '  solid';
        }
}

function  Menu_Out(obj)  {
        obj.style.backgroundColor  =  '';
        obj.style.border  =  '1px  '  +  color[2]  +  '  solid';
}

function  Menu_Click(obj,  s)  {
        subMenu_Show(obj,  s)
}

function  subMenu_Over(obj)  {
        obj.style.backgroundColor  =  color[0];
        obj.style.border  =  '1px  '  +  color[1]  +  '  solid';
}

function  subMenu_Out(obj)  {
        obj.style.backgroundColor  =  '';
        obj.style.border  =  '1px  '  +  color[3]  +  '  solid';
}

function  subMenu_Hide(hide)  {
        for  (var  i=0;  isubMenu.length;  i++)
        subMenu[i].style.display  =  'none';
        sub_display  =  hide;
}

function  subMenu_Show(obj,  s)  {
        subMenu_Hide(false);
        subMenu(s).style.posLeft  =  obj.offsetLeft  +  6;
        subMenu(s).style.display  =  '';
        sub_display  =  true;
}

window.onfocus  =  subMenu_Hide;
/script>  
=-=======================-----------------========================================

 

模仿OUTLOOK的菜单:
head>
style  type="text/css">
.titleStyle{
background-color:#3366cc;color:#ffffff;border-top:1px  solid  #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#efefef;color:blue;font-size:9pt;
}

a{
color:blue;
}
body{
font-size:9pt;
}
/style>
/head>
body>
script  language="JavaScript">
!--
  var  layerTop=20;              //菜单顶边距
  var  layerLeft=30;            //菜单左边距
  var  layerWidth=140;        //菜单总宽
  var  titleHeight=20;        //标题栏高度
  var  contentHeight=200;  //内容区高度
  var  stepNo=10;                  //移动步数，数值越大移动越慢

  var  itemNo=0;runtimes=0;
  document.write('span  id=itemsLayer  style="position:absolute;overflow:hidden;border:1px  solid  #efefef;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');

  function  addItem(itemTitle,itemContent){
      itemHTML='div  id=item'+itemNo+'  itemIndex='+itemNo+'  style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';">table  width=100%  cellspacing="0"  cellpadding="0">'+
              'tr>td  height='+titleHeight+'  onclick=changeItem('+itemNo+')  class="titleStyle"  align=center>'+itemTitle+'/td>/tr>'+
              'tr>td  height='+contentHeight+'  class="contentStyle">'+itemContent+'/td>/tr>/table>/div>';
      document.write(itemHTML);
      itemNo++;
  }
        //添加菜单标题和内容，可任意多项，注意格式：
  addItem('欢迎','BR>　　WWW.CNBRUCE.COM');
  addItem('网页专区','center>a  href="#">网页工具/a>  BR>BR>a  href="#">技术平台/a>  BR>BR>a  href="#">设计理念/a>  BR>BR>a  href="#">更多/a>/center>');
  addItem('美工教室','center>a  href="#">平面设计  /a>  BR>BR>a  href="#">三维空间/a>  BR>BR>a  href="#">设计基础/a>  BR>BR>a  href="#">更多../a>/center>');
  addItem('Flash','center>a  href="#">基础教程/a>  BR>BR>a  href="#">技巧运用/a>  BR>BR>a  href="#">实例剖析/a>  BR>BR>a  href="#">更多../a>/center>');
  addItem('多媒体','center>a  href="#">DIRECTOR/a>  BR>BR>a  href="#">Authorware/a>  BR>BR>a  href="#">更多../a>/center>');
  addItem('精品赏析','center>a  href="#">设计精品/a>/center>');

  document.write('/span>')
  document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;

  toItemIndex=itemNo-1;onItemIndex=itemNo-1;

  function  changeItem(clickItemIndex){
      toItemIndex=clickItemIndex;
      if(toItemIndex-onItemIndex>0)  moveUp();  else  moveDown();
      runtimes++;
      if(runtimes>=stepNo){
          onItemIndex=toItemIndex;
          runtimes=0;}
      else
          setTimeout("changeItem(toItemIndex)",10);
  }

  function  moveUp(){
      for(i=onItemIndex+1;i=toItemIndex;i++)
          eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
  }

  function  moveDown(){
      for(i=onItemIndex;i>toItemIndex;i--)
          eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
  }
  changeItem(0);
//-->
/script>
/body>