网上流行选向卡

仿windows选项卡或叫做tabpan以及tabpage，现在还有最新的进展譬如仿淘宝网导航菜单效果皆属于此类：

HTML代码

<script type="text/javascript" > function TabPage(width, height, tabTitleArray, tabPageArray) { var ids = new Array(); var id = document.uniqueID; var tabTitleHtml = ""; var index = 0; for (var i = 0; i < tabTitleArray.length; i++) { tabTitleHtml += "<table border='0' cellspacing='0' cellpadding='0' width='" + width + "'>" + "<tbody><tr>"; var titles = tabTitleArray[i]; for (var n = 0; n < titles.length; n++) { var myId = id + index; ids[index] = myId; var title = titles[n]; tabTitleHtml += "<td class='TabTitle'" + " οnclick=/"secBoard(this, '" + myId + "')/">" + title + "</td>"; index++; } tabTitleHtml += "</tr></tbody></table>"; } var tabPageHtml = ""; for (var i = 0; i < tabPageArray.length; i++) { tabPageHtml += "<tbody id='" + ids[i] + "' style='display:none''>" + "<tr><td>" + tabPageArray[i] + "</td>" + "</tr></tbody>"; } var controlID = document.uniqueID.toString(); var html = "<table id='" + controlID + "' width='" + width + "' border='0'><tbody><tr><td>" + tabTitleHtml + "<table border='0' cellspacing='0' cellpadding='0' width='" + width + " ' height='" + height +"' class='TabPage'>" + tabPageHtml + "</table>" + "</td></tr></tbody></table>"; // window.clipboardData.setData('text', html); document.write(html); document.getElementById(controlID).rows[0].cells[0].children[0].rows[0].cells[0].click(); } function secBoard(obj, tabPageID) { // td. tr. tbody table var currentTabTitleTable = obj.parentNode.parentNode.parentNode; var container = obj.parentNode.parentNode.parentNode.parentNode; for (var n = 0; n < container.children.length - 1; n++) // 最后一个Childe是TabPageTable { var cells = container.children[n].rows[0].cells; for(var i = 0; i < cells.length; i++) { var cell = cells[i] if (cell.className == "SelectedTabTitle") { cell.className = "TabTitle"; break; } } } obj.className = "SelectedTabTitle"; var tabPageTable = container.lastChild; for (var i = 0; i < container.children.length; i++) { var node = container.children[i]; if (node != currentTabTitleTable) continue; if (node.nextSibling == tabPageTable) break; node.swapNode(node.nextSibling); node = container.children[i+1]; } for(var i = 0; i < tabPageTable.tBodies.length; i++) { var tbody = tabPageTable.tBodies[i]; if (tbody.style.display != "none") { tbody.style.display = "none"; break; } } document.getElementById(tabPageID).style.display = "block"; } function GetPinYinArray() { var pinYinArray = new Array( new Array('a','ai','an','ang','ao'), new Array('ba','bai','ban','bang','bao','bei','ben','beng','bi','bian','biao','bie','bin','bing','bo','bu'), new Array('ca','cai','can','cang','cao','ce','cen','ceng','cha','chai','chan','chang','chao','che','chen','cheng','chi','chong','chou','chu','chua','chuai','chuan','chuang','chui','chun','chuo','ci','cong','cou','cu','cuan','cui','cun','cuo'), new Array('da','dai','dan','dang','dao','de','deng','di','dia','dian','diao','die','ding','diu','dong','dou','du','duan','dui','dun','duo'), new Array('e','en','er'), new Array('fa','fan','fang','fei','fen','feng','fo','fou','fu'), new Array('ga','gai','gan','gang','gao','ge','gei','gen','geng','gong','gou','gu','gua','guai','guan','guang','gui','gun','guo'), new Array('ha','hai','han','hang','hao','he','hei','hen','heng','hong','hou','hu','hua','huai','huan','huang','hui','hun','huo'), new Array(), new Array('ji','jia','jian','jiang','jiao','jie','jin','jing','jiong','jiu','ju','juan','jue','jun','jv'), new Array('ka','kai','kan','kang','kao','ke','ken','keng','kong','kou','ku','kua','kuai','kuan','kuang','kui','kun','kuo'), new Array('la','lai','lan','lang','lao','le','lei','leng','li','lia','lian','liang','liao','lie','lin','ling','liu','long','lou','lu','luan','lue','lun','luo','lv'), new Array('ma','mai','man','mang','mao','me','mei','men','meng','mi','mian','miao','mie','min','ming','miu','mo','mou','mu'), new Array('na','nai','nan','nang','nao','ne','nei','nen','neng','ni','nian','niang','niao','nie','nin','ning','niu','nong','nou','nu','nuan','nue','nuo','nv'), new Array('o','ou'), new Array('pa','pai','pan','pang','pao','pei','pen','peng','pi','pian','piao','pie','pin','ping','po','pou','pu'), new Array('qi','qia','qian','qiang','qiao','qie','qin','qing','qiong','qiu','qu','quan','que','qun'), new Array('ran','rang','rao','re','ren','reng','ri','rong','rou','ru','ruan','rui','run','ruo'), new Array('sa','sai','san','sang','sao','se','sen','seng','sha','shai','shan','shang','shao','she','shen','sheng','shi','shou','shu','shua','shuai','shuan','shuang','shui','shun','shuo','si','song','sou','su','suan','sui','sun','suo'), new Array('ta','tai','tan','tang','tao','te','teng','ti','tian','tiao','tie','ting','tong','tou','tu','tuan','tui','tun','tuo'), new Array(), new Array(), new Array('wa','wai','wan','wang','wei','wen','weng','wo','wu'), new Array('xi','xia','xian','xiang','xiao','xie','xin','xing','xiong','xiu','xu','xuan','xue','xun'), new Array('ya','yan','yang','yao','ye','yi','yin','ying','yo','yong','you','yu','yuan','yue','yun'), new Array('za','zai','zan','zang','zao','ze','zei','zen','zeng','zha','zhai','zhan','zhang','zhao','zhe','zhen','zheng','zhi','zhong','zhou','zhu','zhua','zhuai','zhuan','zhuang','zhui','zhun','zhuo','zi','zong','zou','zu','zuan','zui','zun','zuo') ); var array = new Array(pinYinArray.length); for (var i = 0; i < pinYinArray.length; i++) { var html = ""; var myArray = pinYinArray[i]; for (var n = 0; n < myArray.length; n++) { html += myArray[n] + " "; } html += ""; array[i] = html; } return array; } function GetFirstLetterArray() { var array = new Array( new Array('A','B','C','D','E','F','G'), new Array('H','I','J','K','L','M','N'), new Array('O','P','Q','R','S','T'), new Array('U','V','W','X','Y','Z')); return array; } // 调用例子一 new TabPage(200, 50,GetFirstLetterArray(), GetPinYinArray() ); // 调用例子二 var titleArray = new Array( new Array(1, 2, 3, 4), new Array(5, 6, 7, 8), new Array(9, 10, 11, 12), new Array(13, 14, 15, 16)); var pageArray = new Array(1, 2,3 ,4, 5,6,7,8,9,10,11,12,13,14,15,16); new TabPage(200, 50,titleArray, pageArray ); </script> <style type="text/css"> .TabTitle { text-align: center; background-color:#99CC99; cursor: hand; color: #000000; border-left: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0; border-right: 1px solid gray; border-bottom: 1px solid #F0F0F0 } .SelectedTabTitle { text-align: center; background-color: #D2D8D8; cursor: hand; color: blue; border-left: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0; border-right: 1px solid gray; } .TabPage { background-color: #D2D8D8; color: #000000; border-left:1px solid #F0F0F0; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tab Effect Example</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href="http://vip.5d.cn/allinhands/M/file/2-sample.css" rel="stylesheet" type="text/css"> <script language="JavaScript"> function tabit(id,cid) { tab5d.className="taboff";tabcv.className="taboff";tabbi.className="taboff";id.className="tabon"; c5d.style.display="none";ccv.style.display="none";cbi.style.display="none";cid.style.display="block"; //winname=cid; } function showall() { tab5d.className="tabon";tabcv.className="tabon";tabbi.className="tabon"; c5d.style.display="block";ccv.style.display="block";cbi.style.display="block"; } </script> </head> <body onLoad="tabit(tab5d,c5d)"> <table width="300" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="20" class="taboff" id="tab5d" style="cursor:hand" onClick="tabit(tab5d,c5d)" width="25%">5DMedia</td> <td class="taboff" id="tabcv" style="cursor:hand" onClick="tabit(tabcv,ccv)" width="25%">ChinaVisual</td> <td class="taboff" id="tabbi" style="cursor:hand" onClick="tabit(tabbi,cbi)" width="25%">Bluediea</td> <td width="25%"> </td> </tr> <tr id="c5d" style="display:none"> <td colspan="4" class="tdbody"> <p><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/5dmedia.gif" width="88" height="31"><br> <br> 5DMedia</strong><br> <a href="http://www.5dmedia.com">http://www.5dmedia.com</a><br> <a href="http://www.5dmedia.com/bbs">http://www.5dmedia.com/bbs</a> </p> </td> </tr> <tr id="ccv" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/cv_logo.gif" width="88" height="31"><br> <br> ChinaVisual</strong><br> <a href="http://www.chinavisual.com">http://www.chinavisual.com</a> <br> <a href="http://forum.chinavisual.com">http://forum.chinavisual.com</a> </td> </tr> <tr id="cbi" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/blueidea.gif" width="88" height="31"><br> <br> Blueidea</strong><br> <a href="http://www.bluedidea.com">http://www.bluedidea.com</a> <br> <a href="http://www.blueidea.com/bbs">http://www.blueidea.com/bbs</a></td> </tr> </table> <!--<p align="center"><font color="#006600" style="cursor:hand" onClick=showall()><strong>Show All</strong></font></p>--> <p> </p> <p align="center">Powered By <a href="mailto:allinhands@chinavisual.com">Allinhands</a>.QQ:1707477<br> Notice:No order these sites above!</p>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<script type="text/javascript" src="http://www.smallrain.net/jsimg/webtabs.js"></script> <script language=javascript> function f_start() { var Widget = new WebTabs_widget(480, 320, 10, 10, "absolute") Widget.add(new WebTabs_tab("文件", "page_1", "http://www.smallrain.net/jsimg/images/5.gif")) Widget.add(new WebTabs_tab("编辑", "page_2", "http://www.smallrain.net/jsimg/images/6.gif")) Widget.add(new WebTabs_tab("查看", "page_3", "http://www.smallrain.net/jsimg/images/7.gif")) Widget.add(new WebTabs_tab("插入", "page_4", "http://www.smallrain.net/jsimg/images/16.gif")) Widget.add(new WebTabs_tab("修改", "page_5", "http://www.smallrain.net/jsimg/images/17.gif")) document.getElementById("WebTabs_container").innerHTML = Widget Widget.f_init_tabs() //Widget.f_move_to(120, 20) Widget.f_move_by(20, 20) Widget.f_activate_tab(3) } </script> </head> <body> <div id=WebTabs_container></div> <div id=page_1 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table><tr><td id="theTD"> <a href="###" οnclick="document.getElementById('theTD').bgColor='yellow';">点我一下试试看？</a> </td></tr></table> </td> </tr> </table> </div> </div> <div id=page_2 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> u { border-bottom: 1px red dotted; text-decoration:none } </style> <u>Unalloyed stabilization is unceasingly changing Only use English software and data......</u> </td> </tr> </table> </div> </div> <div id=page_3 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table border="1" οnmοuseοver="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon11.gif'" οnmοuseοut="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon10.gif'"><tr><td style="font-family:华文行楷;color:red">自己动手 丰衣足食</td></tr></table> <table border="1"><tr><td><img id="foo" src="http://www.blueidea.com/bbs/icon/icon10.gif"/></td></tr></table> </td> </tr> </table> </div> </div> <div id=page_4 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <a href="#" οnclick="this.style.fontWeight='bold';"><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></a> </td> </tr> </table> </div> </div> <div id=page_5 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> .node{border:1px solid #000000; position: absolute; width: 19px; height: 90px; text-align:center; vertical-align:middle; font-size:9pt; background-color:#CCDDFF } TD {font-size:9pt} </style> <div class="node" style="left: 25px; top: 25px"><table width="100%" height="100%"><tr><td>朱雀</td></tr></table></div> <div class="node" style="left: 55px; top: 25px"><table width="100%" height="100%"><tr><td>玄武</td></tr></table></div> </td> </tr> </table> </div> </div> <script>f_start();</script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<STYLE type=text/css>.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8 } .main_tab { BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8 } </STYLE> <!--JavaScript部分--> <SCRIPT language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </SCRIPT> <p align="center"> <!--HTML部分--> <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0> <TBODY> <TR align=middle height=20> <TD class=sec2 οnclick=secBoard(0) width="10%">1</TD> <TD class=sec1 οnclick=secBoard(1) width="10%">2</TD> <TD class=sec1 οnclick=secBoard(2) width="10%">3</TD> <TD class=sec1 οnclick=secBoard(3) width="10%">4</TD> </TR></TBODY></TABLE> <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记--> <TBODY style="DISPLAY: block"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu16.gif"><BR> <table><tr><td style="width:80;height:20;background-color:blue" οnmοuseοver="this.style.backgroundColor='red'" οnmοuseοut="this.style.backgroundColor='blue'"></td></tr></table> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu24.gif"><BR> <form name="form1" method="post" action=""> <select name="select" style="background:#FF0000;color:white"> <option >凤，风之羽也。</option> <option>ddddddddddddd</option> <option>ddddddddddddddddd</option> <option>eeeeeeeeeeeeeeee</option> <option>eeeeeeeeeeeeeeee</option> </select> </form> </TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu30.gif"><BR> <style type="text/css"> <!-- .formstyle { font-family: "宋体"; font-size: 10pt; color: #FF0000; background-color: #FFFFCC} --> </style> <center> <form name="form1" method="post" action=""> <select name="select" class="formstyle"> <option value="a1.html">menu1</option> <option value="a4.html" selected>menu2</option> <option value="a8.html">menu3</option> </select> </form> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu34.gif"><br> <table border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> <tr> <a href="a12.html"><td bgcolor="#FFFFFF" onMouseOver="this.style.color='#ffffff'; this.style.background='#003399'" onMouseOut="this.style.color='#003399'; this.style.background='#ffffff'" style="cursor: hand">恰在似与不似之间</td></a> </tr> </table> </TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<HTML> <HEAD> <script> var Num=4; //这里是增加选项卡的数目 var carNum=2+Num function document.onselectstart() { var obj=event.srcElement if(obj.tagName=="SPAN") { return false; } } function document.onmousedown() { var obj=event.srcElement var pobj=obj.parentElement.id; if(obj.className=="span") { for(i=1;i<carNum;i++) { if(pobj==("btn"+i)) { document.all("td"+i).style.backgroundColor="menu" document.all("btn"+i).style.height=20 content(i) } else { document.all("td"+i).style.backgroundColor="white" document.all("btn"+i).style.height=18 } } } } function content(i) { //这里是菜单名 mnuItem(1,"第一项") mnuItem(2,"图片世界") mnuItem(3,"第三个内容") mnuItem(4,"表格") mnuItem(5,"滚动字幕") //End if(i==1) { span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>" +"<input><br><input><br><input type=submit>" } if(i==2) { span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" } if(i==3) { span1.innerHTML="<h1>第三个内容</h1>"} if(i==4) { span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" +"<tr><td>aaaaaaaa</td></tr>" +"<tr><td>bbbbbbbb</td></tr>" +"<tr><td>ccccccccc</td></tr></table>" } if(i==5) { span1.innerHTML="<marquee>" +"这是第五个内容" +"啦啦..？</marquee>" } } function mnuItem(i,con) { document.all("MenuName"+i).innerText=con } </script> <style>td{font-size:9pt} .span{ cursor:default; padding-left:5; padding-top:2; padding-right:5; padding-bottom:0; width:100%; height:100%; } </style> <TITLE></TITLE> <META http-equiv="content-type" content="text/html;charset=gb2312"> </HEAD> <BODY bgcolor=FFFFFF οnlοad=content(1) onselectstart="return false"> <p> <table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td> <table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20> <td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=menu> <tr> <td width=1 height=1></td><td width=1 height=1></td> <td bgcolor=white></td><td></td><td></td> </tr> <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> <td></td><td bgcolor=black></td><td></td> </tr> <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td> </tr> <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td> </tr> </table> </td> <script> for(i=2;i<carNum;i++) { tdBody="<td valign=bottom>" tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>" tdBody+="<tr>" tdBody+="<td width=1 height=1><//td><td width=1 height=1><//td>" tdBody+="<td bgcolor=white><//td><td></td><td></td>" tdBody+="<//tr>" tdBody+="<tr><td width=1 height=1><//td><td width=1 height=1 bgcolor=white><//td>" tdBody+="<td></td><td bgcolor=black><//td><td></td>" tdBody+="<//tr>" tdBody+="<tr><td width=1 bgcolor=white><//td><td width=1 height=1><//td>" tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <//span></td><td width=1 bgcolor=gray><//td><td bgcolor=black width=1><//td>" tdBody+="<//tr>" tdBody+="<tr><td bgcolor=white><//td><td colspan=4 height=1 bgcolor=white id=td"+i+"><//td>" tdBody+="<//tr>" tdBody+="<//table>" tdBody+="<//td>"; document.write(tdBody) } </script> </td> <td style="border-bottom:1 white solid" width=50> </td> </tr> </table> <div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> <span id=span1></span><!--这里是内容--> </div> </td></tr></table>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> <script language="javascript"> <!-- function secBoard(n,x,y) { for(i=0;i<secTable.cells.length;i++){ secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2";} for(i=0;i<mainTable.tBodies.length;i++){ mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block";} weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅"; } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">当前位置：展馆分布 > <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody> </table> </td> </tr> </table>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <base href="http://www.cn-lan.com/"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="JavaScript"> var txtstr_1="  QQ:28983016 Email:<a href=mailto:451200@126.com>451200@126.com</a>"; var txtstr_2="  需要软件的朋友可以与我联系。"; var txtstr_3="  论坛现在暂时关闭，请朋友们在QQ上联系." var txtstr_4="  孤独的时候便走向自然；<br>寂寞的时候便走向音乐；<br>失败的时候便走向憧憬；<br>委屈的时候便走向创造和友情。<br>" function changediv(n){ for(i=1;i<=5;i++){ eval("document.getElementById('s'+i+'').className='under'+n+''"); //此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色 } for(i=1;i<=4;i++){ eval("document.getElementById('c"+i+"').className='a"+n+"'"); //此次循环初始化所有的选项卡按钮的背景图片为cb0.gif，银灰色 } eval("document.getElementById('c"+n+"').className='t"+n+"'"); //然后设置鼠标移动到的相应位置的背景图片为相应的图片，修改对应的样式表。 eval("document.getElementById('bodyt').className='body"+n+"'"); //修改选项卡下半部的样式，使其的色彩与上半部的图片相适应。 bodytxt=eval('txtstr_'+n); if(bodytxt==""){ alert("数据正在下载，请稍候!");} else { document.getElementById("txt1").innerHTML=bodytxt; //设置选项卡主体部分相应的文字。 } } </script> <style type="text/css"> <!-- .t1 { background-image: url(cb1.gif); border-bottom-width: medium; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #88c027; } .t2 { background-image: url(cb2.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #eac751; } .t3 { background-image: url(cb3.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #ee6f69; } .t4 { background-image: url(cb4.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #7eaffb; } .t0 { background-image: url(cb0.gif); padding-top: 3px; border-bottom-width: 0px; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> <style type="text/css"> <!-- td { font-size: 12px; line-height: 16px; } .d1 { padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d2{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d3{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d4{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .under1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; } .under2 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; } .under3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; } .under4 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; } .body1 { background-color: #d6efb5; border-top: 0px none; border-right: 1px solid #88c027; border-bottom: 1px solid #88c027; border-left: 1px solid #88c027; } .body2 { background-color:#fff7be; border-top: 0px none #eac751; border-right: 1px solid #eac751; border-bottom: 1px solid #eac751; border-left: 1px solid #eac751; } .body3 { background-color: #ffe5e3; border-top: 0px none; border-right: 1px solid #ee6f69; border-bottom: 1px solid #ee6f69; border-left: 1px solid #ee6f69; } .body4 { background-color: #d4eaff; border-top: 0px none; border-right: 1px solid #7eaffb; border-bottom: 1px solid #7eaffb; border-left: 1px solid #7eaffb; } .firstunderline { border-bottom-width: medium; border-bottom-style: none; } .bodytop { border-top-width: medium; border-top-style: none; } --> </style> <style type="text/css"> <!-- .a1 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a2 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; background-image: url(cb0.gif); border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a4 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .temp { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> </head> <body> <table width="294" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="bottom"> <td id="s1" width="8" height="19" class="under1"><br> </td> <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td> <td id="s2" width="8" class="under1"><br> </td> <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">红色黑客</td> <td id="s3" width="8" class="under1"><br> </td> <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">蓝色月光</td> <td id="s4" width="8" class="under1"><br> </td> <td id="c4" width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飘客</td> <td id="s5" width="49" class="under1"><br> </td> </tr> </table> <table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody> <tr> <td valign="top"><br><div id="txt1"> <script language="javascript"> document.write(txtstr_1); </script> </div> </td> </tr> </tbody> </table> <p> </p>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">当前位置：展馆分布 > <span id="weizi">A展馆1楼展厅</td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableA> <tr height=20 align=center> <td class=sec1 id="A7" onClick="secBoard()">A展馆1楼展厅</td> <td class=sec1 id="A8" onClick="secBoard()">B展馆1楼展厅</td> <td class=sec1 id="A9" onClick="secBoard()">B展馆2楼展厅</td> <td class=sec1 id="A10" onClick="secBoard()">C展馆1楼展厅</td> <td class=sec1 id="A11" onClick="secBoard()">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableB> <tr height=20 align=center> <td class=sec2 id="B1" onClick="secBoard()">A展馆1楼展厅</td> <td class=sec1 id="B2" onClick="secBoard()">A展馆2楼展厅</td> <td class=sec1 id="B3" onClick="secBoard()">B展馆1楼展厅</td> <td class=sec1 id="B4" onClick="secBoard()">B展馆2楼展厅</td> <td class=sec1 id="B5" onClick="secBoard()">C展馆1楼展厅</td> <td class=sec1 id="B6" onClick="secBoard()">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 七 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 八 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 九 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十一 </td> </tr> </tbody> </table> <!--放在这里安全点 #:-) --> <script language="javascript"> <!-- var lastObj="B1",strClassBlur="sec1",strClassActive="sec2"; var tbody=document.getElementById("mainTable").getElementsByTagName("TBODY"); var secTableA=document.getElementById("secTableA"); var secTableB=document.getElementById("secTableB"); function secBoard() { var n=event.srcElement.id; if(lastObj == n)return; if(n.charAt(0) != lastObj.charAt(0)) secTableA.swapNode(secTableB); eval(n).className=strClassActive; titleChange(eval(n).innerText); eval(lastObj).className=strClassBlur; tbody[getNum(lastObj)].style.display="none"; tbody[getNum(n)].style.display="block"; lastObj=n; } function getNum(str) { return parseInt(str.substr(1))-1; } function titleChange(text) { weizi.innerText=text; } //--> </script> </td> </tr> </table>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <style type="text/css"> <!-- body{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000;} td, div, input, textarea{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;cursor: default;} .title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋体;font-size:12px;} .up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff} .down{background-color: #cccccc;border:2px inset #ffffff} .up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff} .down1{background-color:#cccccc;border:1px inset #ffffff} .l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:18} .lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:20} .l-h { background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; } .l-c { background-color: #cccccc; border-top: 2px outset #ffffff } .l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;} .l-hc { background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;} .l-cc { background-color: #cccccc;color:#000000; } .l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;} td{color:#000000;} --> </style> <title>显示属性－www.51windows.Net</title> </head> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no> <SCRIPT LANGUAGE="JavaScript"> <!-- function restore() { td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l"; td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c"; w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none"; } function c1() { td1.className="lc"; td_1.className="l-hc"; w1.style.display="block"; } function c2() { td2.className="lc"; td_2.className="l-cc"; w2.style.display="block"; } function c3() { td3.className="lc"; td_3.className="l-cc"; w3.style.display="block"; } function c4() { td4.className="lc"; td_4.className="l-cc"; w4.style.display="block"; } function c5() { td5.className="lc"; td_5.className="l-cc"; w5.style.display="block"; } function c6() { td6.className="lc"; td_6.className="l-cc"; w6.style.display="block"; } //--> </SCRIPT> <form name="free" method="post" target="_target"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="400" height="61"> <tr> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c1();><div id="td1" class="lc">背景</div></td> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c2();><div id="td2" class="l">屏保</div></td> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c3();><div id="td3" class="l">外观</div></td> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c4();><div id="td4" class="l">Web</div></td> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c5();><div id="td5" class="l">效果</div></td> <td width="50" height="20" align="center" valign="bottom" οnclick=restore();c6();><div id="td6" class="l">设置</div></td> <td width="50" height="20" align="center" valign="bottom" ></td> <td width="50" height="20" align="center" valign="bottom"></td> </tr> <tr style=""> <td width="50" height="1" align="center" class="l-hc" id="td_1" > </td> <td width="50" height="1" align="center" class="l-c" id="td_2"> </td> <td width="50" height="1" align="center" class="l-c" id="td_3"> </td> <td width="50" height="1" align="center" class="l-c" id="td_4"> </td> <td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <td width="50" height="1" align="center" class="l-c" id="td_6"> </td> <td width="50" height="1" align="center" class="l-c" id="td_"> </td> <td width="50" height="1" align="center" class="l-r" id="td_"> </td> </tr> <tr> <td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"> <p align="center"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"> <tr> <td width="100%" height="280"> <div align="center"> <center> <div style="display:" id=w1><h1>AAAAAAAAAAAA</h1></div> <div style="display:none" id=w2><h1>BBBBBBBBBBBBB</h1></div> <div style="display:none" id=w3><h1>CCCCCCCCCCCCC</h1></div> <div style="display:none" id=w4><h1>DDDDDDDDDDDD</h1></div> <div style="display:none" id=w5><h1>EEEEEEEEEEEEEE</h1></div> <div style="display:none" id=w6><h1>FFFFFFFFFFFFFFFFF</h1></div> </center> </div> </td> </tr> </table> </div> </td> </tr> </center> </table> </div> </form> </body> </html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background-color: #666666; font-size: 12px; color: #000000; } #container { text-align: left; width: 760px; height: 400px; background-color: #FFFFFF; padding: 20px; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background-color: #FFFFFF; height: 28px; } #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px; padding: 0 15px 0 15px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title #tag4 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title #tag4 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title #tag5 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title #tag5 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title .selectli4 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title a .selectspan4 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title .selectli5 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title a .selectspan5 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #3A81C8; border-right-color: #3A81C8; border-bottom-color: #3A81C8; border-left-color: #3A81C8; background-color: #DFEBF7; } .content2 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ff950b; border-right-color: #ff950b; border-bottom-color: #ff950b; border-left-color: #ff950b; background-color: #FFECD2; } .content3 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FE74B8; border-right-color: #FE74B8; border-bottom-color: #FE74B8; border-left-color: #FE74B8; background-color: #FFECF5; } .content4 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00988B; border-right-color: #00988B; border-bottom-color: #00988B; border-left-color: #00988B; background-color: #E8FFFD; } .content5 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A8BC1F; border-right-color: #A8BC1F; border-bottom-color: #A8BC1F; border-left-color: #A8BC1F; background-color: #F7FAE2; } .hidecontent {display:none;} --> </style> <script language="javascript"> function switchTag(tag,content) { // alert(tag); // alert(content); for(i=1; i <6; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; } if ("content"+i==content) { document.getElementById(content).className=""; }else{ document.getElementById("content"+i).className="hidecontent"; } document.getElementById("content").className=content; } } </script> </head> <body> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" οnclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#" οnclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#" οnclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#" οnclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#" οnclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li> </ul> </div> <div id="content" class="content1"> <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div> <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div> <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div> <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> <div id="content5" class="hidecontent">5、这是使用到的两个图片： <table width="58%" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <style type="text/css"> <!-- .tablestyle1 { font: normal 12px "宋体", Arial; color: #777777; text-decoration: none; text-align: center; vertical-align: middle; border-top: 1px solid #E4E4E4; border-right: 1px solid #4E4E4E; border-bottom: 1px solid #4E4E4E; border-left: 1px solid #E4E4E4; background: #FDFDFD; } .Tdstyle1 { background: #FDFDFD; border-top: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6; cursor: hand; text-decoration: none; } .Titledivstyle { text-align: justify; text-justify:Distribute-all-lines; } .inf1 { color: #EDB905; } .inf2 { color: #107460; } body { margin-left: 0px; margin-top: 0px; } --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function iniINF(Init)//在网页初始化时，将各项详细信息隐藏的过程。 { if(Init) { inf1.style.display='none'; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; } } function showinf(theObj)//查找并显示对应详细信息的过程。 { switch(theObj) { case 'inf1'://当鼠标点击目标为“银行汇款”时的处理过程。 with(findObj(theObj)) if(style.display=='none')//检查当前鼠标点击的选项的详细信息是否已处于显示状态。若已显示，则关闭；若未显示，则弹出。 { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu1.style.color='#FF0000'; Menu1.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu1.style.color=''; Menu1.style.background=''; } break; case 'inf2'://当鼠标点击目标为“邮局汇款”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf1.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu2.style.color='#FF0000'; Menu2.style.background='#E1F8C2'; Menu1.style.color=''; Menu1.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu2.style.color=''; Menu2.style.background=''; } break; case 'inf3'://当鼠标点击目标为“网上支付”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf1.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu3.style.color='#FF0000'; Menu3.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu3.style.color=''; Menu3.style.background=''; } break; case 'inf4'://当鼠标点击目标为“电话充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf1.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu4.style.color='#FF0000'; Menu4.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu4.style.color=''; Menu4.style.background=''; } break; case 'inf5'://当鼠标点击目标为“手机充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf1.style.display="none"; inf6.style.display="none"; Menu5.style.color='#FF0000'; Menu5.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu5.style.color=''; Menu5.style.background=''; } break; case 'inf6'://当鼠标点击目标为“U币卡充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf1.style.display="none"; Menu6.style.color='#FF0000'; Menu6.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu1.style.color=''; Menu1.style.background=''; } else { style.display='none'; Menu6.style.color=''; Menu6.style.background=''; } break; } } // Example: obj = findObj("image1"); function findObj(theObj, theDoc)//查找对象函数。 { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } 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; } //--> </script> </head> <body onLoad="iniINF(true);"> <center><div align="center"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1"> <tr> <td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td> <td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td> <td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td> <td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td> <td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td> <td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf1"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf1"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">开 户 银 行</td> <td width="360"><div align="left">：深圳市商业银行XXX支行</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐   户  名</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐       号</td> <td><div align="left">：2326 5665 5669 2233 xxxx xxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><div align="justify">建议大家在银行汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf2"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle1">通 讯 地 址</td> <td width="360"><div align="left">：深圳市……</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">收   款  人</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">邮       编 </td> <td><div align="left">：xxxxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><div align="justify">建议大家在邮局汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf3"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td> </tr> </table></td> </tr> </table> </td> </tr> </table> </div></center> </body></html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<style> body {font-size:12px;font-family:宋体} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display:none; } </style> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li> <li id="Tab2" class="Selected"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li> <li id="Tab3"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li> <li id="Tab4"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li> </ul> <div id="cnt"> <div id="dTab1" class="HackBox">我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。 </div> <div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】 </div> <div id="dTab3" class="HackBox">学习是件头疼的事，为了能活下去我不得不学习 </div> <div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁 </div> </div> </div> <script language="JavaScript"> //Switch Tab Effect function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){ var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; var dvs=document.getElementById("cnt").getElementsByTagName("div"); for (var i=0;i<dvs.length;i++){ if (dvs[i].id==('d'+tabid)) dvs[i].style.display='block'; else dvs[i].style.display='none'; } } </script>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <title>test</title> <style> td,a,body{font-size:9pt;} .DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000} .DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF} .DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;} </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <script language="javascript"> var AroundInfoArray=new Array(); AroundInfoArray[0]="咖啡厅的内容"; AroundInfoArray[1]="学校的内容"; AroundInfoArray[2]="酒店的内容"; function ChangeFocus(obj) { for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++) { if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj) { document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus"; document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i]; }else{ document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur"; } } } </script> <table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top"> <table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble"> <tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">咖啡厅</td></tr> <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">学校</td></tr> <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">酒店</td></tr> <tr><td style="border-right:solid 1px #eeeeee"> </td></tr> </table> </td><td width="360"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content"> <tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr> </table> </td></tr> </table> <script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script> </body></html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>menu</title> <base target="_blank"> <style> A:link {COLOR: #0000cc; TEXT-DECORATION: underline} A:visited {COLOR: #551a8b; TEXT-DECORATION: underline} A:active{COLOR: #ff0000; TEXT-DECORATION: none} A:hover {COLOR: #ff0000; TEXT-DECORATION: underline} body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #ffffff; color: #000000; font-size: 12px; } td{ font-size:12px; line-height: 150%; } .white {color: #ffffff} .cardNormal { CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #FFFFFF; border-top: 1px solid #0A6CCE; border-right: 1px solid #0A6CCE; border-bottom: 1px solid #0A6CCE; border-left: 1px solid #0A6CCE; } .cardSelected { BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BORDER-TOP: 1px solid #0A6CCE; FONT-WEIGHT: normal; CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #E1EFFD; } .boardMain { BORDER-RIGHT: 1px solid #dbe9fd; BORDER-LEFT: 1px solid #dbe9fd; COLOR: #F1AB65; LINE-HEIGHT:200%; BORDER-BOTTOM:1px solid #0A6CCE; BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BACKGROUND-COLOR:#E1EFFD; } .cardSpace { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLeft { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLast { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } A.nav1:link {COLOR: #000000; TEXT-DECORATION: none} A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none} A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none} .erect{ COLOR: #ffffff; WRITING-MODE: tb-rl; TEXT-ALIGN:left; letter-spacing:2px; } A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none} A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none} </style> </head> <body bgcolor="#FFFFFF"> <table width="230" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <!-- 菜单定义开始 --> <script language=javascript> function secCard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="cardNormal"; secTable.cells[n].className="cardSelected"; for(i=1;i<secTable.cells.length;i=i+2) secTable.cells[i].className="cardSpace"; secTable.cells[n+1].className="cardSpaceLeft"; secTable.cells[3].className="cardSpaceLast"; } function secBoard(n) { for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display=""; } </script> <td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect"> 中国</span></TD> <td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable> <TBODY> <TR> <TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD> <TD width="2" height="20" class="cardSpace"> </TD> <TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD> <TD width="2" height="20" class="cardSpace"> </TD> </TR> </TBODY> </TABLE></TD> </TR> <tr> <td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable"> <TBODY style="DISPLAY: block"> <TR> <TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>abcde</td> </tr> </table></TD> </TR> </TBODY> <TBODY style="DISPLAY: none"> <TR> <TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="69"><div align="center"></div> abcde</td> </tr> </table></TD> </TR> </TBODY> </TABLE></TD> </TR> </TABLE> </body></html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background: #D6D3CE; font-size: 14px; font-weight:bold; color: #000000; } #top{ width:739px; height:65px; background: #D6D3CE url(top.gif) no-repeat; } #bottom { width:739px; height:45px; background: #D6D3CE url(bottom.gif) no-repeat 615px 0px; font-size:12px; font-weight:normal; text-align:left; padding:22px 0 0 22px; } #container { text-align: left; width: 717px; margin: 0 11px; background: #D6D3CE; } #conleft{ float:left; width:134px; height:296px; border: 1px #7B9EBC solid; background:#FFF; text-align:center; padding-top:10px; } #conright{ float:right; width:550px; height:306px; border: 1px #7B9EBC solid; background:#FFF; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background: #D6D3CE; height: 28px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border: 1px #94999C solid ; background: #EFE6E7; } .content2 { border: 1px #94999C solid ; background: #EFE6E7; } .content3 { border: 1px #94999C solid ; background: #EFE6E7; } .hidecontent {display:none;} /*-----------Tags-----------*/ #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(tagleft.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(tagright.gif) no-repeat right -29px; padding: 0 25px 0 25px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px; } --> </style> <!-------------去掉连接的虚线框-----------------> <script> function bluring(){ if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); } document.οnfοcusin=bluring; </script> <!----------------标签设计---------------------> <script language="javascript"> function switchTag(tag,content) { // alert(tag); // alert(content); for(i=1; i <3; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; } if ("content"+i==content) { document.getElementById(content).className=""; }else{ document.getElementById("content"+i).className="hidecontent"; } document.getElementById("content").className=content; } } </script> </head> <body> <div id="top"></div> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" οnclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">金翅擘海</span></a></li> <li id="tag2"><a href="#" οnclick="switchTag('tag2','content2');this.blur();"><span><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></span></a></li> <li id="tag3"><a href="#" οnclick="switchTag('tag3','content3');this.blur();"><span>子虚乌有</span></a></li> </ul> </div> <div id="content" class="content1"> <div id="content1">说老实话，办老实事，做老实人。 说谎话的不仅没糖吃，而且还有可能被狼吃掉......</div> <div id="content2" class="hidecontent">虚心、踏实、坚韧的学习 老虎不发猫，你当我病危？——蓝色语</div> <div id="content3" class="hidecontent">klklklklklkl</div> </div> </div> <div id="bottom">marvellous ©版权所有2000-2006</div> </body>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<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" οnclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab2" valign="middle" class="mousehand" οnclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" οnclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td> <td width="7" class="Black"> </td> <td width="" align="right" class="Black"><a href="http://www.eawan.com">查看示例</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 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<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" οnclick="run(this.id)">表一</div> <div class="div_01" id="d2" οnclick="run(this.id)">表二</div> <div class="div_01" id="d3" οnclick="run(this.id)">表三</div> <div class="div_01" id="d4" οnclick="run(this.id)">表四</div> <div class="div_01" id="d5" οnclick="run(this.id)">表五</div> <div class="div_01" id="d6" οnclick="run(this.id)">表六</div> <div id="div_02">初始化</div> </div> <Script type="text/JavaScript"> var oHTML=[ "<a href=/"test.asp/">测试表一数据</a>", "<a href=/"test.asp/">测试表二数据</a>", "<a href=/"test.asp/">测试表三数据</a>", "<a href=/"test.asp/">测试表四数据</a>", "<a href=/"test.asp/">测试表五数据</a>", "<a href=/"test.asp/"><center><img src=http://www.blueidea.com/articleimg/usericon/marvellous.gif style='border:6 red groove;filter:fliph;'><span style='width:234;height:33;'></span><img src=http://www.blueidea.com/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 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<!-- $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 href="http://www.jluvip.com/works/css/tabber/"><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 href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p> <div class="tabber" style="width:567px;"> <div class="tabbertab"> <h2>剑气凌人</h2> <p><Font Size=4 Face="微软简行楷"><Font Color="#FF0000">孤</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="#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">己</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">来</Font><Font Color="#0046FF">复</Font><Font Color="#1700FF">无</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="微软简行楷"><Font Color="#FF00FF">既</Font><Font Color="#B900FF">然</Font><Font Color="#7200FF">爱</Font><Font Color="#2B00FF">上</Font><Font Color="#0015FF">了</Font><Font Color="#004AFF">那</Font><Font Color="#0080FF">一</Font><Font Color="#00B5FF">抹</Font><Font Color="#00C0C7">蓝</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="微软简行楷"><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="微软简行楷"><Font Color="#FF0000">时</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">没</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="微软简行楷"><Font Color="#FF0000">没</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="#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">实</Font></Font> </p> </div> <div class="tabbertab"> <h2>孤零飘客</h2> <p><Font Size=3 Face="隶书"><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">乐</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">爱</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">坚</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">强</Font><Font Color="#00C016">的</Font><Font Color="#1FC000">走</Font><Font Color="#55C000">自</Font><Font Color="#8AC000">己</Font><Font Color="#BFC000">认</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>◥□◣☆★春花 秋 月 何时了 ★☆◢□◤<br>◥□◣☆ ↘往事 知 多少 ↙☆◢□◤<br>◥□◣小楼 昨夜 又东风 ◢□◤<br>◥故国不堪回首月明中◤<br>◥雕栏玉砌应犹在◤<br>←只↑←是↑←朱↑←颜↑←改 <br>←问↑←君↑←能↑←有↑←几↑←多↑←愁 <br>←恰↑←似↑←一↑←江↑←春↑←水↑←向↑←东↑←流</center> </body> </html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<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);">蓝色</a></div></div>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

HTML代码

<!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" href="http://www.forest53.com/tutorials/onepage/one_page.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" href="http://www.forest53.com/tutorials/onepage/one_page_ie.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 href="http://www.ibiblio.org/wm/paint/auth/delacroix/">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 href="http://www.ibiblio.org/wm/paint/auth/constable/">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 href="http://www.ibiblio.org/wm/paint/auth/boudin/">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 href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">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 href="http://www.ibiblio.org/wm/paint/auth/courbet/">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 href="http://www.ibiblio.org/wm/paint/auth/monet/">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 href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p> <img src="vincent.jpg" alt="The Starry Night" title="The Starry Night"/> <p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">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 href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p> <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">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 全部选择 提示：你可先修改部分代码，再按运行]