精典的CSS样式

技术2022-05-11 91

例<body style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#00ffcc00',endcolorstr='#c099ccff') ">注：gradientType 可以是 1或是0startcolorstr 開始的顏色endcolorstr 結束時的顏色顏色是Alpha+color所得Alpha=00|20|50|a0|c0|ff

顏色動態的變化在head前加上<script language="JavaScript"><!--var m=250;var s=-5;var mycol;var timeID=0;

function aa(){ m=m+s; mycol=m.toString(16); if(m<16) mycol="0"+mycol; mybg.filters.item('DXImageTransform.Microsoft.Gradient').StartColorStr="#"+mycol+"8888"; mybg.filters.item('DXImageTransform.Microsoft.Gradient').EndColorStr="#88"+mycol+"88";

if(m>245) s=-Math.abs(s); if(m<10) s=Math.abs(s);

timeID=setTimeout("aa()",100);}//--></script> 然後<body id="mybg" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#ffffff,endColorstr=#000000,GradientType=0)" OnLoad="aa()">

---------------------------------------------------------------------------------------------------------------------------------------------------

</style><div class="a"> </div><div class="b"> </div>

收藏的几个漂亮的button<style>.btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid}.btn1_mouseout { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid}.btn1_mouseover { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid}.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}.btn3_mouseout { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn3_mouseover { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn3_mousedown{ BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid}.btn3_mouseup { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn_2k3 { BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid}</style>

转摘请注明出处 http://blog.csdn.net/juwuyi<button class=btn title="这是的官方按钮"> 好看的 Button</button><P></p><button class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'" οnmοuseοut="this.className='btn1_mouseout'" title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"> 好看的Green Button</button> <button class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'" οnmοuseοut="this.className='btn1_mouseout'" DISABLED> 好看的Green Button</button><P><button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button><P><button class=btn3_mouseout οnmοuseοver="this.className='btn3_mouseover'" οnmοuseοut="this.className='btn3_mouseout'" οnmοusedοwn="this.className='btn3_mousedown'" οnmοuseup="this.className='btn3_mouseup'" title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"> 好看的QQ Button</button><P><button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"> 好看的 2k3 Button</button>

<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR height=3 width="100%"> <TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR height=1> <TD width=1></TD><TD width=1></TD><TD width=1></TD><TD bgColor=#908a47></TD><TD width=1></TD><TD width=1></TD><TD width=1></TD></TR><TR height=1> <TD></TD><TD bgColor=#908a47 colSpan=2></TD><TD bgColor=#f7f8f9></TD><TD bgColor=#908a47 colSpan=2></TD><TD></TD></TR><TR height=1> <TD></TD><TD bgColor=#908a47></TD><TD bgColor=#f7f8f9 colSpan=3></TD><TD bgColor=#908a47></TD><TD></TD></TR></TBODY></TABLE></TD></TR><TR> <TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0><TBODY><TR> <TD width=1 bgColor=#908a47></TD><TD id=oINNER bgColor=#f7f8f9> </TD><TD width=1 bgColor=#908a47></TD></TR></TBODY></TABLE></TD></TR><TR height=3 width="100%"> <TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR height=1> <TD width=1></TD><TD width=1 bgColor=#908a47></TD><TD width=1 bgColor=#f7f8f9></TD><TD bgColor=#f7f8f9></TD><TD width=1 bgColor=#f7f8f9></TD><TD width=1 bgColor=#908a47></TD><TD width=1></TD></TR><TR height=1> <TD></TD><TD bgColor=#908a47 colSpan=2></TD><TD bgColor=#f7f8f9></TD><TD bgColor=#908a47 colSpan=2></TD><TD></TD></TR><TR height=1> <TD colSpan=3></TD><TD bgColor=#908a47></TD><TD colSpan=3></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>------------------------------------通过最外层table的width可以控制宽度通过分别修改其中的颜色值可以控制边框颜色及背景颜色

===================================================================================

转自http://blog.csdn.net/asthlon/archive/2004/09/28/119209.aspx

GreetingCardDesinger

<html><head><title>Greeting Card Designer－www.51windows.Net</title>

.title { font-family: Verdana; font-size: 13pt; font-weight: bold; color: #FFFFFF;}.lpane { position:absolute; width:144px; height:408px; z-index:1; top: 34px; left: 6px; background: #FFFFFF; border-right:2px solid #99CCFF; border-top:2px solid #333366; border-left:2px solid #333366; border-bottom:2px solid #99CCFF;}.layout { position:absolute; width:443px; height:408px; z-index:1; top: 34px; left: 157px; background-color: #999999; border-right:2px solid #99CCFF; border-top:2px solid #333366; border-left:2px solid #333366; border-bottom:2px solid #99CCFF;}.card { position:absolute; width:375px; height:225px; z-index:2; left: 32px; top: 85px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px solid #000000; padding:15; overflow:hidden;}.cardshadow { position:absolute; width:375px; height:225px; z-index:1; left: 32px; top: 85px; background: #000000; border: 1px solid #000000; FILTER: progid:DXImageTransform.Microsoft.CrBlur( PixelRadius=3, MakeShadow=true, ShadowOpacity=.30);}.rpane { position:absolute; width:144px; height:408px; z-index:1; top: 34px; left: 608px; background:#666666; layer-background-color: #FFFFFF; border-right:2px solid #99CCFF; border-top:2px solid #333366; border-left:2px solid #333366; border-bottom:2px solid #99CCFF; padding:5px;}.bar { position:absolute; width:746px; height:20px; z-index:2; top: 446px; left: 6px; padding:5px;}.bar A:link {text-decoration:none; color:white}.bar A:visited {text-decoration:none; color:white}.bar A:active {text-decoration:none; color:white}.bar A:hover {text-decoration:none; color:yellow}.wbox{ background-color: #FFFFFF; border:1px solid #000000; z-index:2;}.button1{ height:20px; background:#666666; font-family:verdana; color:white; font-size:8pt; font-weight:bold; padding:1px; padding-left:5px; border-bottom:1px solid #999999; cursor:hand; }.textRegion{ height:20px; background:#666666; font-family:verdana; color:white; font-size:8pt; padding:1px; padding-left:5px; border-bottom:1px solid #999999;}.swatch{ height:20px; width:20px; margin:5px; border:1px solid black; cursor:hand;}

</style>

<SCRIPT language=javascript>var gsCurrentControlSet = null;var giLastImg = '1';var giLastTxt = '1';

function fnInit(){ gsCurrentControlSet=oSizeControls;

for (i=0; i<document.all.length; i++) document.all(i).unselectable = "on";

card.unselectable = "off"; card.contentEditable='true'; document.execCommand("2D-Position", true, true); document.execCommand("MultipleSelection", true, true); document.execCommand("LiveResize", true, true);}

function fnToggleOptions(sControlSet){

if (gsCurrentControlSet != sControlSet){ gsCurrentControlSet.style.display = "none"; sControlSet.style.display = "block"; gsCurrentControlSet = sControlSet; }}

function fnChangeSize(oWidth, oHeight, oTop, oLeft) { card.style.width=oWidth; cardshadow.style.width=oWidth; card.style.height=oHeight; cardshadow.style.height=oHeight; card.style.top=oTop; cardshadow.style.top=oTop; card.style.left=oLeft; cardshadow.style.left=oLeft;}

function fnChangeStyle() { if (event.srcElement.className == "swatch") { card.style.background=event.srcElement.style.background; card.style.filter=event.srcElement.style.filter; }}

function fnInsertImage(oImgId,oImgSrc){ var oNode=document.createElement("img"); card.insertBefore(oNode); oNode.src=oImgSrc; giLastImg++; var iTempCount = oImgId + giLastImg; oNode.id = iTempCount; oNode.style.position='absolute';

var oControlRange = document.body.createControlRange(); oControlRange.add(oNode); oControlRange.select();}

function fnInsertText(oTxtId,oTxtFont) { var oNode=document.createElement("div"); card.insertBefore(oNode); oNode.style.fontFamily=oTxtFont; oNode.innerText='Enter some text here'; giLastTxt++; var iTempCount = "text" + giLastTxt; oNode.id = iTempCount; oNode.style.position='absolute';

oNode.setActive()}

function fnChangeFontSize(){ if (document.selection.type == "Control") { var oControlRange = document.selection.createRange(); for (i = 0; i < oControlRange.length; i++) if (oControlRange(i).tagName != "IMG") oControlRange(i).style.fontSize=event.srcElement.style.fontSize; }}

function fnChangeFontFamily (){ if (document.selection.type == "Control"){ var oControlRange = document.selection.createRange(); for (i = 0; i < oControlRange.length; i++) if (oControlRange(i).tagName != "IMG") oControlRange(i).style.fontFamily=event.srcElement.style.fontFamily; }}

function fnChangeFontColor (){ if (document.selection.type == "Control") { var oControlRange = document.selection.createRange(); for (i = 0; i < oControlRange.length; i++) if (oControlRange(i).tagName != "IMG") oControlRange(i).style.color=event.srcElement.style.backgroundColor; }}

</SCRIPT></HEAD>

<DIV ID="title" CLASS="title" STYLE="position:absolute; width:747px; height:28px; z-index:2; top:5px; left:5px">Greeting Card Designer</DIV>

<DIV ID="leftpane" CLASS="lpane"> <DIV CLASS="button1" οnclick="fnToggleOptions(oSizeControls);"> Size</DIV> <DIV CLASS="button1" οnclick="fnToggleOptions(oBackgroundControls);"> Background Style</DIV> <DIV CLASS="button1" οnclick="fnToggleOptions(oTextControls);"> Text</DIV> <DIV CLASS="button1" οnclick="fnToggleOptions(oImageControls);"> Images</DIV> </BR></BR></BR></BR> <DIV CLASS="textRegion"> </BR></BR></BR></BR>Right-click <B>here</B> and select <B>View Source</B> to see how it's done.</BR></BR></BR></BR></BR></DIV></DIV>

<DIV ID="oSizeControls" CLASS="rpane" ALIGN="center" STYLE="display:block;"> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:10pt; padding:1px; font-weight:bold">Size:</DIV> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt; padding:5px">Choose the dimensions of your card by clicking on a size below:</DIV> <BR> <DIV ID="cardsize1" CLASS="wbox" STYLE="width:100; height:65; padding:5px; margin:10px; cursor:hand;" οnclick="fnChangeSize('375','225','85','32');" >4" x 6"</DIV> <DIV ID="cardsize2" CLASS="wbox" STYLE="width:100; height: 100; padding:5px; margin:10px; cursor:hand;" οnclick="fnChangeSize('375','375','5','32');">6" x 6"</DIV> <DIV ID="cardsize3" CLASS="wbox" STYLE="width:70; height: 100; padding:5px; margin:10px; cursor:hand;" οnclick="fnChangeSize('275','375','8','75');">6" x 4"</DIV></DIV>

<DIV ID="oTextControls" CLASS="rpane" ALIGN="left" STYLE="display:none; padding:5px"> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:10pt; padding:1px; font-weight:bold">Text:</DIV> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt; padding:5px">Insert, edit, or reposition text regions. </DIV><BR/> <button οnclick="fnInsertText('georgia')">Insert Text</button><BR/>

<SPAN οnclick="fnChangeFontSize();"> <DIV STYLE="height: 25px; cursor:hand; font-family:georgia; font-size:22pt; font-weight:normal; color:white">Large</DIV> <DIV STYLE="height: 25px; cursor:hand; font-family:georgia; font-size:15pt; font-weight:normal; color:white">Medium</DIV> <DIV STYLE="height: 25px; cursor:hand; font-family:georgia; font-size:10pt; font-weight:normal; color:white">small</DIV> </SPAN><BR/>

<SPAN οnclick="fnChangeFontFamily();"> <DIV STYLE="height: 25px; cursor:hand; font-family:times; font-size:14pt; font-weight:normal; color:white">Times</DIV> <DIV STYLE="height: 25px; cursor:hand; font-family:arial; font-size:14pt; font-weight:normal; color:white">Arial</DIV> <DIV STYLE="height: 25px; cursor:hand; font-family:georgia; font-size:14pt; font-weight:normal; color:white">Georgia</DIV> <DIV STYLE="height: 25px; cursor:hand; font-family:verdana; font-size:14pt; font-weight:normal; color:white">Verdana</DIV> </SPAN><BR/>

<SPAN οnclick="fnChangeFontColor();"> <SPAN CLASS="swatch" STYLE="background:black"> </SPAN> <SPAN CLASS="swatch" STYLE="background:#666666"> </SPAN> <SPAN CLASS="swatch" STYLE="background:#cccccc"> </SPAN> <SPAN CLASS="swatch" STYLE="background:white"> </SPAN><BR/>

<DIV ID="oImageControls" CLASS="rpane" ALIGN="center" STYLE="display:none; padding:5px; overflow:auto"> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:10pt; padding:1px; font-weight:bold">Images:</DIV> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt; padding:5px">Select image to insert, then position or re-size.</DIV>

<DIV ID="oBackgroundControls" CLASS="rpane" ALIGN="center" STYLE="display:none" οnclick="fnChangeStyle();">

<DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:10pt; padding:1px; font-weight:bold">Background:</DIV> <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt; padding:5px">Choose a color or gradient from the styles below.</DIV> <BR/>

<SPAN CLASS="swatch" STYLE="background:black" ></SPAN> <SPAN CLASS="swatch" STYLE="background:#666666" ></SPAN> <SPAN CLASS="swatch" STYLE="background:#cccccc" ></SPAN> <SPAN CLASS="swatch" STYLE="background:white" ></SPAN><BR/>

<SPAN CLASS="swatch" STYLE="background:lightskyblue; filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='1');"> </SPAN> <SPAN CLASS="swatch" STYLE="background:lightskyblue; filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='0');"> </SPAN> <SPAN CLASS="swatch" STYLE="background:lightskyblue; filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='1');"> </SPAN> <SPAN CLASS="swatch" STYLE="background:lightskyblue; filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='0');"> </SPAN><BR/>

<DIV CLASS="bar" > <A href="http://www.microsoft.com/misc/cpyright.htm" target=_top> ©2001 Microsoft Corporation. All rights reserved. Terms of use.</A></DIV></body></html> <div style="position: absolute; bottom: 10; right: 0; width: 150; height:

18;cursor:hand;z-index:100000;font:menu;background:infobackground;border:1 solid #999999;padding:4px;"> <A href="/data/" target=_blank><FONT color=red> DataCenter</FONT></A> <A href="/game/" target=_blank><FONT color=green> 在线小

游戏</FONT></A> <input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'>

=============================================================================

仿 Office 2003 的工具条

<html>

<head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>仿Office 2003的工具条</title><script>/*----------舜子制作Menu Javascript Made by PuterJamE-mail:puterjam@etang.com-------------*/ var listnum=0; var menu_height; var menu_width; var menu_left; var menu_top; var topMar = 1; var leftMar = -2; var space = 1; var isvisible;

function listbox(listname,buttonname,valuename){this.listname=listnamethis.buttonname=buttonnamethis.valuename=valuename}

function ShowMenu(obj,vMnuCode,tWidth,scroll) { vMnuCode = "<table id='submenu' cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style='width:"+tWidth + ";border-collapse: collapse' class='listDiv'><tr height=23><td nowrap align=left>" + vMnuCode + "</td></tr></table>";

menu_height = obj.offsetHeight; menu_width = obj.offsetWidth; menu_left = obj.offsetLeft + leftMar+2; menu_top = obj.offsetTop + topMar + menu_height + space-3; vParent = obj.offsetParent; while (vParent.tagName.toUpperCase() != "BODY") { menu_left += vParent.offsetLeft; menu_top += vParent.offsetTop; vParent = vParent.offsetParent; }

listDiv.innerHTML = vMnuCode; listDiv.style.top = menu_top; listDiv.style.left = menu_left;

if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18} listDiv.style.visibility = "visible"; var cssopaction=submenu.filters[0].opacity submenu.filters[0].opacity=0; submenu.filters[1].Apply(); submenu.filters[0].opacity=100; submenu.filters[1].Play();

isvisible = true;}

function menuitem(lightcolor,normalcolor,icon,title,url){this.lightcolor=lightcolorthis.normalcolor=normalcolorthis.icon=iconthis.title=titlethis.url=url}

function bulidmenu(arrayname){var menuarray=eval(arrayname)menucontent='<table border="0" width="100%">'for (i=0;i<menuarray.length;i++){if (menuarray[i].title!="_line"){if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}if (menuarray[i].icon.length==0){content='<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class="'+css+'">'+menuarray[i].title+'</td></tr></table>'}else{content='<table cellspacing="0" cellpadding="0"><tr><td width="20" nowrap><img src="'+menuarray[i].icon+'"></td><td class="'+css+'">'+menuarray[i].title+'</td></tr></table>'}

if (menuarray[i].url!="_disable"){menucontent=menucontent+'<tr><td height=16 style="cursor:default" οnmοuseοver="style.backgroundColor=/''+ menuarray[i].lightcolor+'/'" οnmοuseοut="style.backgroundColor=/''+ menuarray[i].normalcolor+'/'" οnclick="Golist(/''+menuarray[i].title+'/')">'+content+'</td></tr>'}else{menucontent=menucontent+'<tr><td height=16 style="fitler:gray">'+content+'</td></tr>'}

}else{menucontent=menucontent+'<tr><td height=4><img src="images/dock.gif" width="99%" height=1></td></tr>'}

}menucontent=menucontent+"</table>"return menucontent}

function HL_Menu(obj,state){switch (state){case 0: obj.className="menuover" break;case 1: obj.className="menuup" break;} } var lb=new Array()lb[0]=new listbox('listbox0','listbutton0','listvalue0')lb[1]=new listbox('listbox1','listbutton1','listvalue1') var list1=new Array()list1[0]=new menuitem("#B1CBE4","","","ListItem1","")list1[1]=new menuitem("#B1CBE4","","","ListItem2","")list1[2]=new menuitem("#B1CBE4","","","ListItem3","")list1[3]=new menuitem("#B1CBE4","","","ListItem4","")list1[4]=new menuitem("#B1CBE4","","","ListItem5","")list1[5]=new menuitem("#B1CBE4","","","ListItem6","")list1[6]=new menuitem("#B1CBE4","","","ListItem7","")list1[7]=new menuitem("#B1CBE4","","","ListItem8","")list1[8]=new menuitem("#B1CBE4","","","ListItem9","")list1[9]=new menuitem("#B1CBE4","","","ListItem10","")

blist1=bulidmenu("list1")

var list2=new Array()list2[0]=new menuitem("#B1CBE4","","","字体1","")list2[1]=new menuitem("#B1CBE4","","","字体2","")list2[2]=new menuitem("#B1CBE4","","","字体3","")list2[3]=new menuitem("#B1CBE4","","","字体4","")list2[4]=new menuitem("#B1CBE4","","","字体5","")list2[5]=new menuitem("#B1CBE4","","","字体6","")list2[6]=new menuitem("#B1CBE4","","","字体7","")list2[7]=new menuitem("#B1CBE4","","","字体8","")list2[8]=new menuitem("#B1CBE4","","","字体9","")list2[9]=new menuitem("#B1CBE4","","","字体10","")

blist2=bulidmenu("list2")function Golist(text){listvalue=eval(lb[listnum].valuename)listvalue.innerText=textvDiv = document.all("listDiv");vDiv.style.visibility = "hidden";isvisible = false;} </script>

.menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)}.bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)}.leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand }.getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default }.lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; }.menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;}.menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; }.lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }.getlist { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }

.listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B}.listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); }

</style></head>

</td> </tr> <tr> <td>

===============================================================================

Filters and Transitions Master Sample

<Style>A { color: #0080E0; text-decoration: none; font-weight: bold; cursor: help; filter:progid:dximagetransform.microsoft.pixelate(duration=.7, maxSquare=22, enabled=false); height: 0px; clip: rect();}</style><Script defer>var ar=document.getElementsByTagName('a')for (var i=0;i<ar.length;i++){ar[i].οnmοuseοver=function(){this.filters.item(0).apply();this.filters.item(0).play();}ar[i].οnmοuseοut=function(){this.filters.item(0).apply();this.filters.item(0).play();}}</script><font color=#0080e0> | <a href=#>test1</a> | <a href=#>withwolf's blog</a></font>

<body style="margin:0px;"><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD width="100%" height="22"> <TABLE height=22 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD bgColor=#4b92d9></TD> <TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')" width="50%"></TD> <TD id=regionGradient2 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6', endColorStr='#1E77D3', gradientType='1')" width="50%"></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR vAlign=top> <TD width="100%"> <TABLE height=42 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR vAlign=top> <TD width="60" bgcolor="#0a6cce"><img src="http://www.microsoft.com/library/toolbar/3.0/images/banners/ms_masthead_ltr.gif"></TD> <TD width="10" bgColor=#0a6cce></TD> <TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0A6CCE', endColorStr='#FFFFFF', gradientType='1')" width="507"> </TD> <TD width="224"><span style="font-family:Verdana; font-size:10px ">Search Microsoft.com for: </span></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY></TABLE></body>

================================================================================

单纯使用CSS实现动态提示

=================================================================================

XP风格菜单

function attachXMenu(objid){

==============================================================================

菜单(menu)

整理的几个菜单,

function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}

<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#09224c" align="center"><tr><td>My</td><td>Name</td><td>Is</td><td οnclick="#">LeX </td><td>Rus</td><td>!!!</td></tr></table><script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>

==================================================================================

经典下推式菜单

<html><script>function show(c_Str){if(document.all(c_Str).style.display=='none'){document.all(c_Str).style.display='block';}else{document.all(c_Str).style.display='none';}}

</script><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>ok</title><style>td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; font-size: 10pt } li { color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}

.up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 }

</style></head>

=================================================================================

CSS实现的文字竖排

<div style="layout-flow:vertical-ideographic">说不上为什么<BR>我变的很主动<BR>若爱上一个人<BR>什么都会值得去做<BR>河边的风在吹着你吹着你的长发<BR>飘动……<BR></div><div style="writing-mode=tb-rl;"><p>这也是竖排的文字！</p></div>

=================================================================================

一个渐变的IE Filter效果

<div style="PADDING-RIGHT: 80px; PADDING-BOTTOM:20px; PADDING-LEFT:80px; PADDING-TOP:10px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=100,finishOpacity=5,startX=280,finishX=310,startY=400,finishY=500); BACKGROUND-COLOR: #CC99FF; position: absolute" ><font size="80%"><br>这里是文字<br><br><i>阿山Net</i> - <b>Johnsuna</b><br></div>

专利

最新回复(0)