您现在的位置：陈设世家 >> 网络垃圾桶 >> 知识碎片 >> 备用知识 >> 文章正文rss

windows选项卡|淘宝布局|雅虎布局|新浪布局

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-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>: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','心开风神','image');">热门图片</td>
        <td width="7" class="Black">&nbsp;</td>
        <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td>
        <td width="7" class="Black">&nbsp;</td>
        <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td>
        <td width="7" class="Black">&nbsp;</td>
        <td width="" align="right" class="Black"><a href="http://www.eawan.com">查看示例</a>&nbsp;&nbsp;</td>
      </tr>
    </table>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" class="Content">
        <tr>
          <td height="110"><div id="divimagelist_all">&nbsp;正在加载...</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>

查看演示

查看演示

<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>
查看演示

<!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>
          
          <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>

<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&nbsp;WebMuseum,&nbsp;Paris</a></p>
            </li>
          </ul>
        
      </li>
      <li><a class="hide" href="#nogo">Claude Monet</a>
          
          <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&nbsp;WebMuseum,&nbsp;Paris</a></p>
            </li>
          </ul>
        
      </li>
      <li><a class="hide" href="#nogo">Vincent Van Gogh</a>
          
          <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&nbsp;Starry&nbsp;Night</a> (1889).</p>
              <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
            </li>
          </ul>
        
      </li>
    </ul>
    <div class="clear">&nbsp;</div>
  </div>

</html>

查看演示

上一篇文章：仿windows选项卡效果拾零3

下一篇文章：把fireworks切出来的图片全部转换为表格背景

作者：佚名文章来源：本站原创点击数：更新时间：2006-12-27

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

更多关于 windows选项卡\|淘宝布局\|雅虎布局\|新浪布局的文章
仿windows选项卡效果拾零3 仿windows选项卡效果拾零2 仿windows选项卡效果拾零

热门影视
最新电视剧

·用博客寻找爱情	·厦门人就上厦门顶牛社区	·星期天去哪聚会	·免费发布企业招聘
·在线一亿片视频观看	·挑战美女无极限	·创建我的书签	·我要卖东西,买东西

windows选项卡|淘宝布局|雅虎布局|新浪布局

更多关于 windows选项卡|淘宝布局|雅虎布局|新浪布局 的文章

更多关于 windows选项卡|淘宝布局|雅虎布局|新浪布局的文章