日本门户网站的经典选项卡导航

2024-09-05 12:20:24

字体：大中小

来源：转载

供稿：网友

来自日本门户网站的一款CSS+JavaScript选项卡导航菜单，银灰色风格，看来日本人和中国人的审美是接近的，都喜欢这种风格，如果你要用的话，直接拷贝代码部分到你的网页中，注意你需要修改编码才行，日本的编码和中国可是不一样哦，只要把文字改为中国的就行了。

<HTML><HEAD><title>日本门户网站的经典选项卡导航</title><style type="text/css"> *{margin:0; padding:0;}body{	padding:0;	margin:0;	font-size:8pt;	_font-size:x-small;	color:#333;	background:#FFF;	line-height:1.3em; 	word-break:break-all;}#TabNews{width:403px; padding:0; min-height:260px; border: 1px solid rid;margin:39px;}#News-navi{background:url(/jscss/demoimg/200909/bg_navi.gif) 0 100% no-repeat;background-color:#FFFFFF !important;	width:405px;}#News-navi li{float:left; list-style:none;}#News-navi #News01{width:102px;}#News-navi #News02{width:76px;}#News-navi #News03{width:76px;}#News-navi #News04{width:76px;}#News-navi #News05{width:75px;}#News-navi a{background:url(/jscss/demoimg/200909/bg_navi.gif) 0 0 no-repeat;padding-top:1px;display:block;line-height:1.1;min-height:22px;_height:23px;text-align:center;}#News-navi a span{display:block;padding:3px 0 0;}#News-navi #News01 a{background-position:0 0;}#News-navi #News02 a{background-position:-102px 0;}#News-navi #News03 a{background-position:-178px 0;}#News-navi #News04 a{background-position:-254px 0;}#News-navi #News05 a{background-position:-330px 0;}#News-navi .focus a{font-weight:bold;color:#333333;}#News-navi #News01.focus a{background-position:-405px 0;}#News-navi #News02.focus a{background-position:-507px 0;}#News-navi #News03.focus a{background-position:-583px 0;}#News-navi #News04.focus a{background-position:-659px 0;}#News-navi #News05.focus a{background-position:-735px 0;} #News .news-content .dot li,#News .news-content .dot dd{padding-bottom:3px;}#News .news-content .dot li a,#News .news-content .dot dd a{padding-left:10px;}#News .more-content .dot li a,#News .more-content .dot dd a{background-position:-196px -546px;padding-left:6px;}#News{ min-height:238px;_height:238px; width:403px;border:1px solid #c4c4c4;margin-bottom:10px;border-top:none; background:#FFF;}#News .pkg{width:393px; padding: 5px;}#News .arrR{background-position:-187px -298px;}#News #cocoCeleb{width:187px;}#News .news-content{width:206px; line-height:1.4;}#News .more-content{width:190px;}#News .new{ background-position:1px -140px;*background-position:1px -142px;}</style><SCRIPT type="text/javascript" >function $(){var C=new Array();for(var B=0;B2?B:"200";var A=new Date();A.setTime(A.getTime()+1000*60*60*24*(C));var F=A.toGMTString();document.cookie=D+"="+escape(E)+"; expires="+F+"; path=/;"}</SCRIPT> </HEAD><BODY><div id="TabNews">	<UL id="News-navi" class="pkg"><LI id="News01" class="focus"><SPAN>Codes</SPAN></LI><LI id="News02" class=""><SPAN>ASP</SPAN></LI><LI id="News03" class=""><SPAN>PHP</SPAN></LI><LI id="News04" class=""><SPAN>JSP</SPAN></LI><LI id="News05" class=""><SPAN>DELPHI</SPAN></LI></UL><DIV class="box hslice" id="News"> <DIV id="newsArea01" class="pkg pddT10" style="display: block; ">那个年少轻狂的年代，已经一去不回！</DIV><DIV id="newsArea02" class="pkg pddT10" style="display: none; ">			ASP			</DIV>			<DIV id="newsArea03" class="pkg pddT10" style="display: none; ">			PHP</DIV>			<DIV id="newsArea04" class="pkg pddT10" style="display: none; ">			Jsp			</DIV>		 <DIV id="newsArea05" class="pkg pddT10" style="display: none; ">			Delphi			</DIV>		</DIV>		</div>		</div></BODY></HTML>

上一篇：面试时候写的CSS横向二级菜单

下一篇：横向、竖向两个选项卡Tab联动的实现