本文旨在挖掘表格在艺术创意方面的一些功能效果。
运行代码框<script language="JavaScript"> <!-- var rate = 20; var obj; var act = 0; var elmH = 0; var elmS = 128; var elmV = 255; var clrOrg; var TimerID; if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) { Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow() { if (Browser && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (Browser && act != 0) { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (Browser && act != 1) { obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (Browser && act != 0) { if (obj.tagName == 'A') { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { obj.style.color = makeColor(); } function makeColor() { if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR); elmG = Math.floor(elmG); elmB = Math.floor(elmB); clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16); elmH = elmH + rate; if (elmH >= 360) elmH = 0; return clrRGB; } //--> </script> <style>td{border:0;align:center;vertical-align:middle;}</style> <body bgcolor="#000000"> <br><br> <center> <table style="width:456;height:111;border:10px groove red;" border="1" cellspacing="22" id="myexample" ><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);"> </td><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);"> </td></tr></table> <table style="width:456;height:400;"><tr><td style="width:228;height:400;"> <table border="0" cellspacing="22" style="width:228;height:400;table-layout:fixed;"><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);width:50%;"> </td><td rowspan="4" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);width:50%;"><font face="华文行楷" size="56" color="blue"><a href="#">原</a></font></td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=gray,endColorStr=yellow);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=green,endColorStr=pink);"> </td><td> </td></tr></table> </td> <td style="width:228;height:400;"> <table border="0" cellspacing="22" style="width:228;height:400;filter:fliph;"><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);width:50%;"> </td><td rowspan="4" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);width:50%;"><font face="华文行楷" size="56" color="purple">原</font></td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=gray,endColorStr=yellow);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=green,endColorStr=pink);"> </td><td> </td></tr></table></td></tr></table> </td></tr></table> <script language="JavaScript1.2"> <!-- /* Flashing Table Border Script- ?Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ function flashit(){ if (!document.all) return if (myexample.style.borderColor=="white") myexample.style.borderColor="red" else myexample.style.borderColor="white" } setInterval("flashit()", 500) //--> </script> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
运行代码框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-htm.../loose.dtd"> <HTML><HEAD><TITLE>Rounded Box Demo</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Georgia; BACKGROUND-COLOR: #fff } DIV.rounded-box { MARGIN: 3px; WIDTH: 9em; POSITION: relative; BACKGROUND-COLOR: #e6e6e6; filter:Alpha(Opacity=50); } DIV.top-left-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff } DIV.bottom-left-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff } DIV.top-right-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff } DIV.bottom-right-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff } DIV.top-left-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative } DIV.bottom-left-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative } DIV.top-right-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative } DIV.bottom-right-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative } DIV.top-left-corner { LEFT: 0px; TOP: 0px } DIV.bottom-left-corner { LEFT: 0px; BOTTOM: 0px } DIV.top-right-corner { RIGHT: 0px; TOP: 0px } DIV.bottom-right-corner { RIGHT: 0px; BOTTOM: 0px } DIV.top-left-inside { LEFT: -8px } DIV.bottom-left-inside { LEFT: -8px; TOP: -17px } DIV.top-right-inside { LEFT: -25px } DIV.bottom-right-inside { LEFT: -25px; TOP: -17px } DIV.box-contents { PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #000; PADDING-TOP: 8px; POSITION: relative } </STYLE> <META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD> <BODY> <DIV class=rounded-box> <DIV class=top-left-corner> <DIV class=top-left-inside>•</DIV></DIV> <DIV class=bottom-left-corner> <DIV class=bottom-left-inside>•</DIV></DIV> <DIV class=top-right-corner> <DIV class=top-right-inside>•</DIV></DIV> <DIV class=bottom-right-corner> <DIV class=bottom-right-inside>•</DIV></DIV> <DIV class=box-contents> <center> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="1" rowspan="2"></td> <td width="1" height="1"></td> <td height="1" bgcolor="#cccccc"></td> <td width="1"></td> <td width="1" rowspan="2"></td> </tr> <tr> <td width="1" height="1" bgcolor="#cccccc"></td> <td height="1"></td> <td width="1" bgcolor="#cccccc"
[1] [2] [3] 下一页
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18