仿新浪网,黄色的滑动门Tab效果_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

今天又给大家带来了一款高仿的滑动门效果代码，是仿照新浪网的，但这个用图片做的滑动门有个缺陷：TAB的宽度是不可变的，即只能写4个字符。希望你们能够用上这个Tab效果。

[CSS中国]-示例代码CSS中国---仿新浪网，sina.com的经典黄色滑动门效果代码 <!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>经典黄色滑动门效果代码 ---CSS中国</title> <FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />  <style type="text/css"> *{font:12px "宋体";margin:0;padding:0;} ul{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} .TabADS{width:160px;} .TabADS ul{width:160px;height:24px;background:#fff;} .TabADS li{width:40px;float:left;height:18px;padding:6px 0 0 0;background:url(http://www.zzsky.cn/effect/images/200909150700/sinahome1.gif) no-repeat right #e4e4e4;text-align:center;color:#333;cursor:pointer;} .TabADS .TasADSOn{background:url(http://www.zzsky.cn/effect/images/200909150700/sinahome2.gif) no-repeat right #ffe4a6;text-align:center;color:#333;font-weight:bold;cursor:pointer;} .TabADSCon{background:#FFD77B;padding:5px;width:150px;} .TabADSCon li{text-align:left;line-height:20px;} </style> <script language="javascript" type="text/javascript"> function Show_TabADSMenu(tabadid_num,tabadnum){ for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";} for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";} document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn"; document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block"; } </script> </head> <body>  <div class="TabADS"> <ul> <li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">CSS1</li> <li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">CSS2</li> <li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">CSS3</li> <li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">CSS4</li> </ul> </div> <div class="TabADSCon"> <ul id="tabadcontent_10"> <li><a href="http://www.csschina.net" _fcksavedurl="http://www.csschina.net" target="_blank">CSS中国[http://www.csschina.net],</a></li> </ul> <ul id="tabadcontent_11" style="display:none;"> <li><a href="http://www.csschina.net/a/jc/" _fcksavedurl="http://www.csschina.net/a/jc/" target="_blank">提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程</a></li> </ul> <ul id="tabadcontent_12" style="display:none;"> <li><a href="http://www.csschina.net/a/wd/" _fcksavedurl="http://www.csschina.net/a/wd/" target="_blank">最新的Web2.0标准资讯,DIV+CSS布局入门教程</a></li> </ul> <ul id="tabadcontent_13" style="display:none;"> <li><a href="http://www.csschina.net/a/dm/" _fcksavedurl="http://www.csschina.net/a/dm/" target="_blank">CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!</a></li> </ul> </div> </body> </html>

本文由CSS中国整理

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

仿新浪网,黄色的滑动门Tab效果