漂亮的div css tab

來源:互聯網
上載者:User

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS布局執行個體:TAB滑動門標籤切換代碼</title>
<style type="text/css">
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
a {behavior:url(xuxian.htc)}
.woaicss {width:438px; height:300px; overflow:hidden; margin:50px auto;}
.woaicss_title {width:438px; height:30px; background:#fff url(http://myjs.jz123.cn/inc1/btn_bg.png)  no-repeat; overflow:hidden;}/*http://myjs.jz123.cn/inc1/btn_bg.png*/
.woaicss_title li {display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center;}
.woaicss_title li a {display:block; width:90px; heigth:30px; line-height:34px; color:#fff;}
.woaicss_title li a:hover {color:red; text-decoration:underline;}
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
.woaicss_con {display:block; width:430px; height:260px; background:url() no-repeat 0 0; overflow:hidden; BORDER: #aecbd4 1px solid; }/*/images/20110424/con_bg.png*/
.woaicss_con ul {width:418px; height:250px; margin:12px auto;}
.woaicss_con li {width:418px; line-height:30px; margin:0 auto; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}
.woaicss_con li a {color:#03c;}
.woaicss_con li a:hover {color:#069; text-decoration:underline;}
.woaicss_copy {width:438px; margin:10px auto; text-align:center;}
.woaicss_copy a {color:#f00;}
</style>
</head>
 
<body>
 
<div class="woaicss">
<script language="javascript">
 function woaicssq(num){
 for(var id = 1;id<=4;id++)
 {
 var MrJin="woaicss_con"+id;
 if(id==num)
 document.getElementById(MrJin).style.display="block";
 else
 document.getElementById(MrJin).style.display="none";
 }
 if(num==1)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
 if(num==2)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
 if(num==3)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
 if(num==4)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
 }
</script>
 <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(1)">TAB ①</a></li>
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(2)">TAB ②</a></li>
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(3)">TAB ③</a></li> 
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(4)">TAB ④</a></li>
 </ul>
 <div class="woaicss_con" id="woaicss_con1" style="display:block;">
   <ul>
     <li>· <a title="超級漂亮的幾款清新、常用的網頁CSS布局配色執行個體" target="_blank" href="#"> 超級漂亮的幾款清新、常用的網頁CSS布局配色執行個體</a></li>
     <li>· <a title="CSS製作斜角上有背景圖片的Div層" target="_blank" href="#"> CSS製作斜角上有背景圖片的Div層</a></li>
     <li>· <a title="Js實現的層展開、層摺疊效果,預設時候層是摺疊的" target="_blank" href="#"> Js實現的層展開、層摺疊效果,預設時候層是摺疊的</a></li>
     <li>· <a title="DIV始終固定在網頁右下角位置的CSS實現方法" target="_blank" href="#"> DIV始終固定在網頁右下角位置的CSS實現方法</a></li>
     <li>· <a title="JavaScript未知高度元素的垂直置中的方法" target="_blank" href="#"> JavaScript未知高度元素的垂直置中的方法</a></li>
     <li>· <a title="漸層彩色的文字" target="_blank" href="#"> 漸層彩色的文字</a></li>
     <li>· <a title="指定文字逐條顯示" target="_blank" href="#"> 指定文字逐條顯示</a></li>
     <li>· <a title="滾動的標題列" target="_blank" href="#"> 滾動的標題列</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con2" style="display:none;">
   <ul>
<li>·
<a title="JS 4屏平滑滾動投影片特效" target="_blank" href="#">
JS 4屏平滑滾動投影片特效</a></li>
<li>·
<a title="圖片的無縫滾動(縱向、橫向)" target="_blank" href="#">
圖片的無縫滾動(縱向、橫向)</a></li>
<li>·
<a title="滑鼠觸及帶邊框的菜單" target="_blank" href="#">
滑鼠觸及帶邊框的菜單</a></li>
<li>·
<a title="比較實用的CSS控制連結顏色效果" target="_blank" href="#">
比較實用的CSS控制連結顏色效果</a></li>
<li>·
<a title="滑鼠接觸或者離開圖片時,圖片大小會相應變化" target="_blank" href="#">
滑鼠接觸或者離開圖片時,圖片大小會相應變化</a></li>
<li>·
<a title="特殊的滑鼠移至上方提示" target="_blank" href="#">
特殊的滑鼠移至上方提示</a></li>
<li>·
<a title="CSS Sprite製作的滑鼠感應網站導航條" target="_blank" href="#">
CSS Sprite製作的滑鼠感應網站導航條</a></li>
<li>·
<a title="滑鼠啟用顯示背景色的CSS特效代碼" target="_blank" href="#">
滑鼠啟用顯示背景色的CSS特效代碼</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con3" style="display:none;">
   <ul>
<li>·
<a title="[酷] 又一款FLASH圖片轉場效果代碼" target="_blank" href="#">
[酷] 又一款FLASH圖片轉場效果代碼</a></li>
<li>·
<a title="精緻的翻動圖片新聞代碼" target="_blank" href="#">
精緻的翻動圖片新聞代碼</a></li>
<li>·
<a title="跟隨滑鼠頂部奇妙的海底生花" target="_blank" href="#">
跟隨滑鼠頂部奇妙的海底生花</a></li>
<li>·
<a title="強制點擊廣告代碼的特效" target="_blank" href="#">
強制點擊廣告代碼的特效</a></li>
<li>·
<a title="滑鼠經過列表顯示小圖的列表特效代碼" target="_blank" href="#">
滑鼠經過列表顯示小圖的列表特效代碼</a></li>
<li>·
<a title="不用圓角圖片製作的圓角效果" target="_blank" href="#">
不用圓角圖片製作的圓角效果</a></li>
<li>·
<a title="超級漂亮的幾款清新、常用的網頁CSS布局配色執行個體" target="_blank" href="#">
超級漂亮的幾款清新、常用的網頁CSS布局配色執行個體</a></li>
<li>·
<a title="CSS製作斜角上有背景圖片的Div層" target="_blank" href="#">
CSS製作斜角上有背景圖片的Div層</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con4" style="display:none;">
   <ul>
<li>·
<a title="Js實現的層展開、層摺疊效果,預設時候層是摺疊的" target="_blank" href="#">
Js實現的層展開、層摺疊效果,預設時候層是摺疊的</a></li>
<li>·
<a title="DIV始終固定在網頁右下角位置的CSS實現方法" target="_blank" href="#">
DIV始終固定在網頁右下角位置的CSS實現方法</a></li>
<li>·
<a title="JavaScript未知高度元素的垂直置中的方法" target="_blank" href="#">
JavaScript未知高度元素的垂直置中的方法</a></li>
<li>·
<a title="漸層彩色的文字" target="_blank" href="#">
漸層彩色的文字</a></li>
<li>·
<a title="指定文字逐條顯示" target="_blank" href="#">
指定文字逐條顯示</a></li>
<li>·
<a title="滾動的標題列" target="_blank" href="#">
滾動的標題列</a></li>
<li>·
<a title="JS 4屏平滑滾動投影片特效" target="_blank" href="#">
JS 4屏平滑滾動投影片特效</a></li>
<li>·
<a title="圖片的無縫滾動(縱向、橫向)" target="_blank" href="#">
圖片的無縫滾動(縱向、橫向)</a></li>
   </ul>
 </div>
</div>
</body>
</html>

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。