選項卡，仿msn風格

2024-09-05 12:20:14

字體：大中小

來源：轉載

供稿：網(wǎng)友

來自MSN網(wǎng)站的選項卡，清新淡藍色風格，新聞類、資訊類、文章類網(wǎng)站都比較適合使用，代碼擴展性高，W3C標準設計，兼容IE、火狐等多種瀏覽器，整體效果非常不錯。

<!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><title>msn 選項卡</title><style type="text/css">body {text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}li{list-style:none;}a img{border:none;}a:link{text-decoration:none;color:#07519A;}a:visited{text-decoration:none;color:#07519A;}a:active,a:hover{text-decoration:underline;color:#07519A;}.tarea0{float:left;height:220px;width:242px;}.tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}.tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}.tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:60px;background:url(http://www.codefans.net/jscss/demoimg/200907/msfp_015.gif) repeat-x;}ul.tbtn li:hover{text-decoration:underline;}ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}.tbcon{margin:8px 0px 6px 8px;text-align:left;padding:8px;}</style><script language="javascript" type="text/javascript">function tabit(btn){	var idname = new String(btn.id);	var s = idname.indexOf("_");	var e = idname.lastIndexOf("_")+1;	var tabName = idname.substr(0, s);	var id = parseInt(idname.substr(e, 1));	var tabNumber = btn.parentNode.childNodes.length;	for(i=0;i<tabNumber;i++){		document.getElementById(tabName+"_div_"+i).style.display = "none";		document.getElementById(tabName+"_btn_"+i).className = "";	};		document.getElementById(tabName+"_div_"+id).style.display = "block";		btn.className = "curr";};</script></head><body><div   id="iwvjtn8m0"   class="tarea2" style="height:223px;">	<ul class="tbtn"><li onclick="tabit(this)" id="tabap1_btn_0" class="curr">最新上傳</li><li onclick="tabit(this)" id="tabap1_btn_1">分類導航</li><li  onclick="tabit(this)" id="tabap1_btn_2">網(wǎng)頁特效</li><li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">瀏覽排行</li></ul>	<div   id="iwvjtn8m0"   class="clr"></div>	<div   id="iwvjtn8m0"   class="tbcon" id="tabap1_div_0">這里是最新上傳的內(nèi)容</div>	<div style="display: none;" class="tbcon" id="tabap1_div_1">這里是分類導航</div>	<div style="display: none;" class="tbcon" id="tabap1_div_2">網(wǎng)頁特效的內(nèi)容</div>	<div style="display: none;" class="tbcon" id="tabap1_div_3">瀏覽排行</div>	</div></body></html>

上一篇：清新的橫排下拉菜單

下一篇：鼠標移動會動的CSS菜單