首页 > 代码库 > 用JS代码修饰出来的有立体感的按钮式竖向文字菜单

用JS代码修饰出来的有立体感的按钮式竖向文字菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    <HTML>    <HEAD>    <TITLE>用JS代码修饰出来的有立体感的按钮式竖向文字菜单丨</TITLE>    </HEAD>    <BODY>    <STYLE type=text/css>A:link {    TEXT-DECORATION: none    }    A:visited {    TEXT-DECORATION: none    }    A:active {    TEXT-DECORATION: none    }    A:hover {    TEXT-DECORATION: none    }    .up {    BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0    }    </STYLE>    <SCRIPT language=JavaScript>    <!-- IE and NS6 Menu Button script kurt.grigg@virgin.net    if (!document.layers){    // Choose size and colours here!    Width=100;    Font=Verdana;    FontSize=9;    AFontColor=#000000;    BFontColor=red;    CFontColor=#ffffff;    down="#6699cc";    FontWeight=normal;  //normal or bold!    BackGround=#99ccff; //Same as your body bgcolor!    BorderDepth=2;    BorderLight=#FFFFFF;    BorderShad=#000000;    //Nothing needs altering past here!!!!!!!!!!!!!!!!!!!!!!    function On(id){    with(id.style){    color=BFontColor;    borderTopColor=BorderLight;    borderLeftColor=BorderLight;    borderRightColor=BorderShad;    borderBottomColor=BorderShad;    }    }    function Off(id){    with(id.style){    color=AFontColor;    borderTopColor=BackGround;    borderLeftColor=BackGround;    borderRightColor=BackGround;    borderBottomColor=BackGround;    background=BackGround;    }    }    function Down(id){    with(id.style){    color=CFontColor;    borderTopColor=BorderShad;    borderLeftColor=BorderShad;    borderRightColor=BorderLight;    borderBottomColor=BorderLight;    background=down;    }    }    function Link(Url,Txt,target){    document.write("<a href=http://www.mamicode.com/‘"+Url+"‘ target=‘"+target+"‘>"    +"<div style=‘position:relative;"    +"width:"+Width+"px;height:"+FontSize+"px;"    +"border-width:"+BorderDepth+"px;"    +"border-color:"+BackGround+";"    +"border-style:solid;"    +"padding:"+FontSize/4.5+"pt;"    +"background:"+BackGround+";"    +"font-family:"+Font+";"    +"font-size:"+FontSize+"pt;"    +"line-height:"+FontSize*1.2+"pt;"    +"font-weight:"+FontWeight+";"    +"text-align:left;"    +"color:"+AFontColor+";"    +"margin-top:2px;"    +"cursor:hand‘"    +"onMouseOver=‘javascript:On(this)‘"    +"onMouseOut=‘javascript:Off(this)‘"    +"onMouseDown=‘javascript:Down(this)‘>"    +Txt+"</div></a>");    }    }    function Temp(){    alert("TEST");    }    //-->    </SCRIPT>    <!-- End Menu Buttons Part:1 --><!-- Menu Buttons Part:2 Paste in Body where needed -->    <SCRIPT language=JavaScript>    <!--    if (!document.layers){    if (document.getElementById&&!document.all){    document.write("<div style=‘position:relative‘>"    +"<table border=‘0‘ cellpadding=‘0‘ cellspacing=‘0‘>"    +"<tr><td valign=‘top‘>");    }    Link(http://www.baidu.com,百度一下,_blank);    Link(http://www.yahoo.com,Yahoo,_blank);    Link(http://www.google.com,Google,_blank);    Link(‘http://www.jxztbz.net/,‘纸筒,_blank);    Link(http://www.163.com,网易,main);    if (document.getElementById&&!document.all){    document.write("</td></tr></table></div>");    }    }    //-->    </SCRIPT>    </BODY>    </HTML>    <br><br><hr>    

 

用JS代码修饰出来的有立体感的按钮式竖向文字菜单