CSS制作標簽卡
編輯：CSS詳解
- <style type="text/CSS">
- body { font-size:14px; font-family:"宋體"}
- ol li { margin:8px}
- #con { font-size:12px; width:600px; margin:0 auto}
- #tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
- #tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
- #tags li a { text-decoration:none; float:left; background:url(images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
- #tags li.emptyTag { width:4px; background:none}
- #tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
- #tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
- #tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}
- .tagContent { background:url(images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
- #tagContent div.selectTag{ display:block}
-
- </style>
- </head>
- <body>
- <h1>標簽示例</h1>
- <div id="con">
- <ul id="tags">
- <li><a href="Javascript:void(0)" onmouSEOver="selectTag('tagContent0',this)">標簽一</a></li>
- <li class="selectTag"><a href="Javascript:void(0)" onmouSEOver="selectTag('tagContent1',this)">標簽二</a></li>
- <li><a href="Javascript:void(0)" onmouSEOver="selectTag('tagContent2',this)">自適應寬度的標簽</a></li>
- </ul>
- <div id="tagContent">
- <div id="tagContent0" class="tagContent">第一個標簽的內容</div>
- <div id="tagContent1" class="tagContent selectTag">第二個標簽的內容<p>標簽背景圖1：<img src="images/tagleft.gif" align="top"><br>標簽背景圖2：<img src="images/tagright.gif" align="top"><br>內容漸變背景圖(1象素寬)：<img src="images/bg.gif" align="top"></p></div>
- <div id="tagContent2" class="tagContent">第三個標簽的內容<p>放大觀看標簽背景圖：<img src="images/tagleft.gif" align="top" width="300" height="100"></p></div>
- </div>
- </div>
- <script type="text/Javascript">
- function selectTag(showContent,selfObj){
- // 操作標簽
- var tag = document.getElementById("tags").getElementsByTagName("li");
- var tagtaglength = 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>