作者：marvellous 時(shí)間： 2006-06-15 文檔類(lèi)型：原創(chuàng) 來(lái)自：藍(lán)色理想
第 1 頁(yè) 仿windows選項(xiàng)卡效果拾零 [1] 第 2 頁(yè) 仿windows選項(xiàng)卡效果拾零 [2] 第 3 頁(yè) 仿windows選項(xiàng)卡效果拾零 [3] 第 4 頁(yè) 仿windows選項(xiàng)卡效果拾零 [4]
運(yùn)行代碼框<style> body { font-family: Arial,"宋體"; font-size:9pt; } td { font-size:12px;; } .mousehand{ cursor:hand; } .titletable{ padding-left:5px; background-color:#E9E9E9; } table.TabBarLevel1{ } table.TabBarLevel1 td{ border:1px solid #CCCCCC; height:20px; background-color:#E1E1E1; } table.TabBarLevel1 td.Selected{ border-bottom-width:0px; background-color:#ffffff; } table.TabBarLevel1 td.Black{ border-left-width:0px; border-top-width:0px; border-right-width:0px; background-color:#FFFFFF; } table.Content{ border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } </style> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1"> <tr align="center"> <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心開(kāi)風(fēng)神','image');">熱門(mén)圖片</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虛烏有','image');">波希米亞</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飄客','image');">紅色黑客</td> <td width="7" class="Black"> </td> <td width="" align="right" class="Black"><a >查看示例</a> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content"> <tr> <td height="110"><div id="divimagelist_all"> 正在加載...</div></td> </tr> </table></td> </tr> </table> <script language="javascript"> function switchTab(tabpage,tabid,action,type){ var oItem = document.getElementById(tabpage); for(var i=1;i< 4;i++){ var x = document.getElementById(type + 'Tab' + i); //alert(x); x.className = "mousehand"; //var y = x.getElementsByTagName('a'); //y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; //gethotimagelist(type+'_'+action); divimagelist_all.innerHTML = type+'_'+action; } </script> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
運(yùn)行代碼框<style type="text/css"> #div { width:360px; } .div_01{ border:1px solid #FFFFFF; background-color:#3366CC; width:60px; height:30px; float:left; color:#FFFFFF; } #div_02 { border:1px solid #000000; width:360px; height:300px; } </style> <center> <div id="div"> <div class="div_01" id="d1" onclick="run(this.id)">表一</div> <div class="div_01" id="d2" onclick="run(this.id)">表二</div> <div class="div_01" id="d3" onclick="run(this.id)">表三</div> <div class="div_01" id="d4" onclick="run(this.id)">表四</div> <div class="div_01" id="d5" onclick="run(this.id)">表五</div> <div class="div_01" id="d6" onclick="run(this.id)">表六</div> <div id="div_02">初始化</div> </div> <Script type="text/JavaScript"> var oHTML=[ "<a href=\"test.asp\">測(cè)試表一數(shù)據(jù)</a>", "<a href=\"test.asp\">測(cè)試表二數(shù)據(jù)</a>", "<a href=\"test.asp\">測(cè)試表三數(shù)據(jù)</a>", "<a href=\"test.asp\">測(cè)試表四數(shù)據(jù)</a>", "<a href=\"test.asp\">測(cè)試表五數(shù)據(jù)</a>", "<a href=\"test.asp\"><center><img src=http://www.95time.cn/articleimg/usericon/marvellous.gif style='border:6 red groove;filter:fliph;'><span style='width:234;height:33;'></span><img src=http://www.95time.cn/articleimg/usericon/marvellous.gif style='border:6 blue double;'></a>" ] function run(obj){ for(i=1;i<=6;i++) { eval("document.getElementById(\"d"+i+"\").style.backgroundColor=\"#3366cc\""); document.getElementById(obj).style.backgroundColor="#FF0000"; } document.getElementById("div_02").innerHTML=oHTML[obj.split("")[1]*1-1]; } </Script> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
運(yùn)行代碼框<!-- $Id: example.html,v 1.4 2006/03/27 02:44:36 pat Exp $ --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <base ><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Simple Tabber Example</title> <script type="text/javascript" src="tabber.js"></script> <link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen"> <link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print"> <script type="text/javascript"> /* Optional: Temporarily hide the "tabber" class so it does not "flash" on the page as plain HTML. After tabber runs, the class is changed to "tabberlive" and it will appear. */ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); </script> </head> <body> <center> <h1>Tabber Example</h1> <p>← <a >Tabber Home</a></p> <div class="tabber" style="width:567px;"> <div class="tabbertab"> <h2>劍氣凌人</h2> <p><Font Size=4 Face="微軟簡(jiǎn)行楷"><Font Color="#FF0000">孤</Font><Font Color="#FFA000">獨(dú)</Font><Font Color="#55C000">時(shí)</Font><Font Color="#00C07F">我</Font><Font Color="#0080FF">才</Font><Font Color="#2A00FF">能</Font><Font Color="#FF00FF">感</Font><Font Color="#FF00FF">受</Font><Font Color="#2B00FF">到</Font><Font Color="#0080FF">真</Font><Font Color="#00C080">實(shí)</Font><Font Color="#55C000">的</Font><Font Color="#FFA000">自</Font><Font Color="#FF0000">己</Font></Font> </p> </div> <div class="tabbertab"> <h2>垃圾青蛙</h2> <p><Font Size=4 Face="華文行楷"><Font Color="#FF0000">天</Font><Font Color="#FF5700">地</Font><Font Color="#FFAE00">有</Font><Font Color="#A3C000">正</Font><Font Color="#2FC000">氣</Font> <Font Color="#00C0B9">往</Font><Font Color="#009EFF">來(lái)</Font><Font Color="#0046FF">復(fù)</Font><Font Color="#1700FF">無(wú)</Font><Font Color="#8B00FF">窮</Font> <Font Color="#8C00FF">落</Font><Font Color="#1800FF">眼</Font><Font Color="#0045FF">繁</Font><Font Color="#009DFF">華</Font><Font Color="#00C0BA">處</Font> <Font Color="#2EC000">盡</Font><Font Color="#A2C000">是</Font><Font Color="#FFAF00">色</Font><Font Color="#FF5800">與</Font><Font Color="#FF0000">空</Font></Font> </p> </div> <div class="tabbertab"> <h2>天外飛豬</h2> <p><Font Size=3 Face="微軟簡(jiǎn)行楷"><Font Color="#FF00FF">既</Font><Font Color="#B900FF">然</Font><Font Color="#7200FF">愛(ài)</Font><Font Color="#2B00FF">上</Font><Font Color="#0015FF">了</Font><Font Color="#004AFF">那</Font><Font Color="#0080FF">一</Font><Font Color="#00B5FF">抹</Font><Font Color="#00C0C7">藍(lán)</Font><Font Color="#00C080">色</Font><Font Color="#00C039">，</Font><Font Color="#0EC000">就</Font><Font Color="#55C000">注</Font><Font Color="#9BC000">定</Font><Font Color="#E2C000">要</Font><Font Color="#FFA000">憂</Font><Font Color="#FF6B00">郁</Font><Font Color="#FF3600">一</Font><Font Color="#FF0000">生</Font></Font> </p> </div> <div class="tabbertab"> <h2>鐵板牛排</h2> <p><Font Size=3 Face="微軟簡(jiǎn)行楷"><Font Color="#FF00FF">[</Font><Font Color="#0000FF">全</Font><Font Color="#00C0FF">力</Font><Font Color="#00C000">以</Font><Font Color="#FFC000">赴</Font><Font Color="#FF0000">,</Font><Font Color="#FF0000">重</Font><Font Color="#FFC000">塑</Font><Font Color="#00C000">自</Font><Font Color="#00C0FF">我</Font><Font Color="#0000FF">]</Font> </Font> </p> </div> <div class="tabbertab"> <h2>蕭蕭小雨</h2> <p><Font Size=3 Face="微軟簡(jiǎn)行楷"><Font Color="#FF0000">時(shí)</Font><Font Color="#FFA000">間</Font><Font Color="#55C000">悄</Font><Font Color="#00C07F">悄</Font><Font Color="#0080FF">的</Font><Font Color="#2A00FF">走</Font><Font Color="#FF00FF">了</Font><Font Color="#2B00FF">，</Font><Font Color="#0080FF">沒(méi)</Font><Font Color="#00C080">有</Font><Font Color="#55C000">等</Font><Font Color="#FFA000">我</Font><Font Color="#FF0000">。</Font></Font> </p> </div> <div class="tabbertab"> <h2>天牙海腳</h2> <p><Font Size=3 Face="微軟簡(jiǎn)行楷"><Font Color="#FF0000">沒(méi)</Font><Font Color="#FFA000">樹(shù)</Font><Font Color="#55C000">葉</Font><Font Color="#00C07F">的</Font><Font Color="#0080FF">亞</Font><Font Color="#2A00FF">當(dāng)</Font><Font Color="#FF00FF">—</Font><Font Color="#FF00FF">—</Font><Font Color="#2B00FF">大</Font><Font Color="#0080FF">膽</Font><Font Color="#00C080">而</Font><Font Color="#55C000">又</Font><Font Color="#FFA000">真</Font><Font Color="#FF0000">實(shí)</Font></Font> </p> </div> <div class="tabbertab"> <h2>孤零飄客</h2> <p><Font Size=3 Face="隸書(shū)"><Font Color="#FF00FF">情</Font><Font Color="#9500FF">有</Font><Font Color="#2B00FF">多</Font><Font Color="#0030FF">少</Font><Font Color="#0080FF">…</Font><Font Color="#00C0EA">…</Font><Font Color="#00C080">歡</Font><Font Color="#00C016">樂(lè)</Font><Font Color="#55C000">就</Font><Font Color="#BFC000">有</Font><Font Color="#FFA000">多</Font><Font Color="#FF5000">少</Font><Font Color="#FF0000">…</Font><Font Color="#FF5000">…</Font><Font Color="#FFA000">就</Font><Font Color="#C0C000">讓</Font><Font Color="#55C000">我</Font><Font Color="#00C015">們</Font><Font Color="#00C07F">這</Font><Font Color="#00C0E9">樣</Font><Font Color="#0080FF">愛(ài)</Font><Font Color="#0030FF">到</Font><Font Color="#2A00FF">老</Font><Font Color="#9400FF">…</Font><Font Color="#FF00FF">…</Font></Font> </p> </div> <div class="tabbertab"> <h2>兩面之城</h2> <p><Font Size=4 Face="方正姚體"><I><Font Color="#FF00FF">我</Font><Font Color="#CA00FF">堅(jiān)</Font><Font Color="#9500FF">持</Font><Font Color="#6000FF">自</Font><Font Color="#2B00FF">己</Font><Font Color="#0008FF">的</Font><Font Color="#0030FF">信</Font><Font Color="#0058FF">念</Font><Font Color="#0080FF">，</Font><Font Color="#00A8FF">沉</Font><Font Color="#00C0EA">默</Font><Font Color="#00C0B5">而</Font><Font Color="#00C080">頑</Font><Font Color="#00C04B">強(qiáng)</Font><Font Color="#00C016">的</Font><Font Color="#1FC000">走</Font><Font Color="#55C000">自</Font><Font Color="#8AC000">己</Font><Font Color="#BFC000">認(rèn)</Font><Font Color="#F4C000">為</Font><Font Color="#FFA000">正</Font><Font Color="#FF7800">確</Font><Font Color="#FF5000">的</Font><Font Color="#FF2800">道</Font><Font Color="#FF0000">路</Font></I></Font> </p> </div> </div> <center>◥□◣☆★春花 秋 月 何時(shí)了 ★☆◢□◤<br>◥□◣☆ ↘往事 知 多少 ↙☆◢□◤<br>◥□◣小樓 昨夜 又東風(fēng) ◢□◤<br>◥故國(guó)不堪回首月明中◤<br>◥雕欄玉砌應(yīng)猶在◤<br>←只↑←是↑←朱↑←顏↑←改 <br>←問(wèn)↑←君↑←能↑←有↑←幾↑←多↑←愁 <br>←恰↑←似↑←一↑←江↑←春↑←水↑←向↑←東↑←流</center> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
運(yùn)行代碼框<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>層切換</title> <style> #red{ display:block; float:left; position:absolute; width:400px; height:400px; background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink); } #green{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green); } #blue{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue); } #switch{ position:absolute; top:400px; width:400px; height:30px; background-color:#000000; } #switch a.tabs{ float:left; color:#ffffff; height:28px; width:133px; margin:0; padding:8px 0 0 14px; font-size:12px; cursor:pointer; text-decoration:none;text-align:center; } #switch a.tabs:hover{ color:#ffff00; background-color:#666666; text-decoration:none; } body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);} </style> <script language="javascript"> function switchbox(i) { selectbox(i); } function selectbox(i) { switch(i) { case 1: document.getElementById("red").style.display="block"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="none"; break; case 2: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="block"; document.getElementById("blue").style.display="none"; break; case 3: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="block"; break; } } </script> </head> <body><div style="position:absolute;top:19px;left:320px;"> <div id="content"> <div id="red"></div> <div id="green"></div> <div id="blue"></div> </div> <div id="switch"><a class="tabs" id="red-tab" href="javascript:switchbox(1);">紅色</a><a class="tabs" id="green-tab" href="javascript:switchbox(2);">綠色</a><a class="tabs" id="blue-tab" href="javascript:switchbox(3);">藍(lán)色</a></div></div> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
運(yùn)行代碼框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links</title> <meta name="Author" content="Stu Nicholls"/> <meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations"/> <meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/> <link rel="stylesheet" media="all" type="text/css" /> <style type="text/css"> body {text-align:center; font-family:verdana, arial, sans-serif; font-size:76%; color:#000; background:#fff url(back.gif) repeat-x; padding:0; border:0; margin:0;} </style> <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" /> <![endif]--> <!--[if lte IE 6]> <style> #ads {display:none;} #smallads {display:none;} #adsie {clear:both; text-align:center; width:750px; margin-top:10px;} #smalladsie {clear:both; text-align:center; width:468px; margin-top:10px;} </style> <![endif]--> </head> <body> <div class="menu" style="margin: 10px auto;"> <ul> <li><a class="hide" href="#nogo">John Constable</a> <!--[if lte IE 6]> <a href="../menu/index.html">John Constable <table><tr><td> <![endif]--> <ul> <li> <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p> <img src="tutu24.gif" OnMouseMove = "this.style.filter = 'alpha(opacity = 20)'" OnMouseOut = "this.style.filter = 'alpha(opacity = 100)'"> <p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p> <p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a >Delacroix</a> and Bonington among others.</p> <p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p> <p>This text is an excerpt from <a >The WebMuseum, Paris</a></p> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#nogo">Claude Monet</a> <!--[if lte IE 6]> <a href="#nogo">Claude Monet <table><tr><td> <![endif]--> <ul> <li> <p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a >Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p> 45454545454545445 <p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a >Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a >Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p> <p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> <p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p> <p><a >Courbet</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p> <p>This text is an excerpt from <a >The WebMuseum, Paris</a></p> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#nogo">Vincent Van Gogh</a> <!--[if lte IE 6]> <a href="../layouts/index.html">Vincent Van Gogh <table><tr><td> <![endif]--> <ul> <li> <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a >Rembrandt</a>.</p> <img src="vincent.jpg" alt="The Starry Night" title="The Starry Night"/> <p>With <a >Cézanne</a> and <a >Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a >Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a >The Starry Night</a> (1889).</p> <p>This text is an excerpt from <a >The WebMuseum, Paris</a></p> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <div class="clear"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想 責(zé)任編輯：moby
上一頁(yè) 仿windows選項(xiàng)卡效果拾零 [3] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來(lái)自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來(lái)自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請(qǐng)不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫(huà)，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請(qǐng)與我們聯(lián)系，我們將立即刪除修改。
第 1 頁(yè) 
第 4 頁(yè) 仿windows選項(xiàng)卡效果拾零 [4]
