天天看點
傳回

不寫js僅用css實作手風琴和頁籤效果 在10年前有一個軟體叫qq，它的面闆實作了一種推拉效果，後來有人命名為“手風琴”效果并在網頁上通過js實作了這個效果，到今天這種效果依然在一些背景管理界面中存在着。還有一種效果，即window系統實作的一種頁籤的效果，不同标簽切換顯示對應标簽下的内容，後來這種效果也廣泛地被應用到網頁中，那麼是不是實作這些效果，必須要寫js代碼呢，答案是否定的，今天我帶大家通過css3的:target僞類選擇器實作這兩種司空見慣的效果。

在10年前有一個軟體叫qq，它的面闆實作了一種推拉效果，後來有人命名為“手風琴”效果并在網頁上通過js實作了這個效果，到今天這種效果依然在一些背景管理界面中存在着。還有一種效果，即window系統實作的一種頁籤的效果，不同标簽切換顯示對應标簽下的内容，後來這種效果也廣泛地被應用到網頁中，那麼是不是實作這些效果，必須要寫js代碼呢，答案是否定的，今天我帶大家通過css3的:target僞類選擇器實作這兩種司空見慣的效果。

手風琴案例：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>:target手風琴效果應用</title>
  6.                 <style type="text/css">
  7.                         .accordionMenu{
  8.                                 font: 12px simsun;
  9.                                 background: #FFFFFF;
  10.                                 color: #424242;
  11.                                 margin: 0 auto;
  12.                                 padding: 10px;
  13.                                 width: 500px;
  14.                         }
  15.                         .accordionMenu h2{
  16.                                 margin: 1px 0;
  17.                                 padding: 0;
  18.                                 position: relative;
  19.                         }
  20.                         .accordionMenu h2 a{
  21.                                 font-size: 13px;
  22.                                 text-shadow: 2px 2px 2px #aeaeae;
  23.                                 text-decoration: none;
  24.                                 background-color: #8f8f8f;
  25.                                 background-image: -webkit-linear-gradient(top,#cecece,#8f8f8f);
  26.                                 border-radius: 5px;
  27.                                 color: #424242;
  28.                                 display: block;
  29.                                 margin: 0;
  30.                                 padding: 10px;
  31.                         }
  32.                         .accordionMenu h2:before{
  33.                                 border: 5px solid #FFFFFF;
  34.                                 border-color: #FFFFFF transparent transparent;
  35.                                 width: 0;
  36.                                 height: 0;
  37.                                 content: '';
  38.                                 position: absolute;
  39.                                 right: 10px;
  40.                                 top: 15px;
  41.                         }
  42.                         .accordionMenu :target h2 a,
  43.                         .accordionMenu h2 a:hover{
  44.                                 background-image: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
  45.                                 color: #FFFFFF;
  46.                         }
  47.                         .accordionMenu p{
  48.                                 font-size: 14px;
  49.                                 margin: 0;
  50.                                 padding: 0 10px;
  51.                                 -webkit-transition: all .5s ease-in;
  52.                                 display: none;
  53.                                 overflow: hidden;
  54.                                 background: lightyellow;
  55.                                 border-radius: 5px;
  56.                         }
  57.                         .accordionMenu :target p{
  58.                                 height: 100px;
  59.                                 display: block!important;
  60.                                 overflow: auto;
  61.                         }
  62.                         .accordionMenu :target h2:before{
  63.                                 -webkit-transform: rotate(-90deg);
  64.                                 -webkit-transform-origin: 50% 0;
  65.                                 -webkit-transition: all .2s ease;
  66.                         }
  67.                 </style>
  68.         </head>
  69.         <body>
  70.                 <div class="accordionMenu">
  71.                         <div class="menuSection" id="friend">
  72.                                 <h2><a href="#friend" target="_blank" rel="external nofollow" >我的好友</a></h2>
  73.                                 <p>我的好友：URL後面跟錨點#，指向文檔内某個具體的元素。這個被連結的元素就是目标元素(target element)，:target選擇器用于選取目前活動的目标元素。URL後面跟錨點#，指向文檔内某個具體的元素。這個被連結的元素就是目标元素(target element)，:target選擇器用于選取目前活動的目标元素。</p>
  74.                         </div>
  75.                         <div class="menuSection" id="stranger">
  76.                                 <h2><a href="#stranger" target="_blank" rel="external nofollow" >陌生人</a></h2>
  77.                                 <p>陌生人：E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法</p>
  78.                         </div>
  79.                         <div class="menuSection" id="blacklist">
  80.                                 <h2><a href="#blacklist" target="_blank" rel="external nofollow" >黑名單</a></h2>
  81.                                 <p>這裡是黑名單的内容！！</p>
  82.                         </div>
  83.                 </div>
  84.         </body>
  85. </html>

複制代碼

效果圖：

不寫js僅用css實作手風琴和頁籤效果 在10年前有一個軟體叫qq，它的面闆實作了一種推拉效果，後來有人命名為“手風琴”效果并在網頁上通過js實作了這個效果，到今天這種效果依然在一些背景管理界面中存在着。還有一種效果，即window系統實作的一種頁籤的效果，不同标簽切換顯示對應标簽下的内容，後來這種效果也廣泛地被應用到網頁中，那麼是不是實作這些效果，必須要寫js代碼呢，答案是否定的，今天我帶大家通過css3的:target僞類選擇器實作這兩種司空見慣的效果。

頁籤案例：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>:target頁籤</title>
  6.                 <style type="text/css">
  7.                         *{
  8.                                 font-family: "microsoft yahei";
  9.                                 margin: 0;
  10.                                 padding: 0;
  11.                         }
  12.                         #tabs{
  13.                                 width: 500px;
  14.                                 height: 400px;
  15.                                 margin: 50px auto;
  16.                         }
  17.                         .tabTitle{
  18.                                 width: 100%;
  19.                                 height: 40px;
  20.                                 line-height: 40px;
  21.                                 clear: both;
  22.                                 overflow: hidden;
  23.                         }
  24.                         .tabTitle > a{
  25.                                 font-size: 16px;
  26.                                 text-align: center;
  27.                                 text-decoration: none;
  28.                                 color: #000000;
  29.                                 min-width: 76px;
  30.                                 height: 100%;
  31.                                 padding: 0 12px;
  32.                                 background: #EEEEEE;
  33.                                 display: block;
  34.                                 float: left;
  35.                                 margin-right: 1px;
  36.                         }
  37.                         .tabTitle > a:hover{
  38.                                 color: #ffffff;
  39.                                 background: #00A750;
  40.                         }
  41.                         .tabContent{
  42.                                 word-break: break-all;
  43.                                 color: #FFFFFF;
  44.                                 width: 100%;
  45.                                 height: 100px;
  46.                                 border: 1px solid #EEEEEE;
  47.                                 overflow: hidden;
  48.                         }
  49.                         .tabContent > div{
  50.                                 font-size: 14px;
  51.                                 width: 100%;
  52.                                 height: 100%;
  53.                                 padding: 10px;
  54.                                 background: #FFFFFF;
  55.                                 overflow: hidden;
  56.                                 box-sizing: border-box;
  57.                                 z-index: 1;
  58.                         }
  59.                         .tabContent > div:nth-child(1),.tabTitle > a:nth-child(1){
  60.                                 background: lightsalmon;
  61.                         }
  62.                         .tabContent > div:nth-child(2),.tabTitle > a:nth-child(2){
  63.                                 background: lightpink;
  64.                         }
  65.                         .tabContent > div:nth-child(3),.tabTitle > a:nth-child(3){
  66.                                 background: goldenrod;
  67.                         }
  68.                         :target{
  69.                                 z-index: 2;
  70.                         }
  71.                 </style>
  72.         </head>
  73.         <body>
  74.                 <div id="tabs">
  75.                         <div class="tabTitle">
  76.                                 <a href="#tab1" target="_blank" rel="external nofollow" >我的好友</a>
  77.                                 <a href="#tab2" target="_blank" rel="external nofollow" >陌生人</a>
  78.                                 <a href="#tab3" target="_blank" rel="external nofollow" >黑名單</a>
  79.                         </div>
  80.                         <div class="tabContent">
  81.                                 <div id="tab1">我的好友：URL後面跟錨點#，指向文檔内某個具體的元素。這個被連結的元素就是目标元素(target element)，:target選擇器用于選取目前活動的目标元素。URL後面跟錨點#，指向文檔内某個具體的元素。這個被連結的元素就是目标元素(target element)，:target選擇器用于選取目前活動的目标元素。</div>
  82.                                 <div id="tab2">陌生人：E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法E:target僞類使用方法</div>
  83.                                 <div id="tab3">這裡是黑名單的内容！！</div>
  84.                         </div>
  85.                 </div>
  86.         </body>
  87. </html>

複制代碼

效果圖：

不寫js僅用css實作手風琴和頁籤效果 在10年前有一個軟體叫qq，它的面闆實作了一種推拉效果，後來有人命名為“手風琴”效果并在網頁上通過js實作了這個效果，到今天這種效果依然在一些背景管理界面中存在着。還有一種效果，即window系統實作的一種頁籤的效果，不同标簽切換顯示對應标簽下的内容，後來這種效果也廣泛地被應用到網頁中，那麼是不是實作這些效果，必須要寫js代碼呢，答案是否定的，今天我帶大家通過css3的:target僞類選擇器實作這兩種司空見慣的效果。
linux應用程式之-web前端（html js css）
上一篇: 詳解CSS中clear屬性both、left、right值的含義
下一篇: 垂直外邊距合并--CSS的Margin屬性:詳解margin屬性

繼續閱讀