仿网易漂亮的TAB选项卡(标签)

2024-09-05 12:19:38

字体：大中小

来源：转载

供稿：网友

仿163的一款TAB选项卡，有的人也称它为网页标签。本标签用到了三个gif背景图片，运行的时候可以点右键保存；无意发现了一这一个，觉得很不错应该奉献给大家，因为它不但美观，而且兼容性好，标签还可以自适应宽度，非常实用。

<!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>仿网易TAB标签</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>BODY {	FONT-SIZE: 14px; }OL LI {	MARGIN: 8px}#con {	FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px}#tags {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px}#tags LI {	BACKGROUND: url(/jscss/demoimg/200904/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px}#tags LI A {	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg/200904/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999;LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none}#tags LI.emptyTag {	BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px}#tags LI.selectTag {	BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px}#tags LI.selectTag A {	BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px}#tagContent {	BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid;PADDING-TOP:1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff}.tagContent {PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg/200904/bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px}#tagContent DIV.selectTag {DISPLAY: block}</STYLE></HEAD><BODY><DIV id=con><UL id=tags>  <LI>源码爱好者 </LI>  <LI class=selectTag>ASP源码 </LI>  <LI>自适应宽度的标签 </LI></UL><DIV id=tagContent><DIV class=tagContent id=tagContent0>提供开源编程源码、电子书及技术文档、JavaScript/CSS特效代码以及常用软件下载等。</DIV><DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV><DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV></DIV><SCRIPT type=text/javascript>function selectTag(showContent,selfObj){	// 标签	var tag = document.getElementById("tags").getElementsByTagName("li");	var taglength = tag.length;	for(i=0; i<taglength; i++){	tag[i].className = "";	}	selfObj.parentNode.className = "selectTag";	// 标签内容	for(i=0; j=document.getElementById("tagContent"+i); i++){	j.style.display = "none";	}	document.getElementById(showContent).style.display = "block";}</SCRIPT></BODY></HTML>

上一篇：适合企业站的DIV+CSS导航菜单

下一篇：超酷超花俏的滑动菜单，响应鼠标滑过