Difference between revisions of "Template:NYMU-Taipei-css"
Ianliu1997 (Talk | contribs) |
Ianliu1997 (Talk | contribs) |
||
| Line 251: | Line 251: | ||
.tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;} | .tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;} | ||
#tab1:target, #tab2:target, #tab3:target{z-index: 1;} | #tab1:target, #tab2:target, #tab3:target{z-index: 1;} | ||
| + | |||
| + | /* span:target */ | ||
| + | #tab-1:target, | ||
| + | #tab-2:target, | ||
| + | #tab-3:target, | ||
| + | #tab-4:target{ | ||
| + | border: solid 1px red; | ||
| + | } | ||
| + | |||
| + | /*頁籤變換*/ | ||
| + | #tab-1:target ~ #tab > ul li a[href$="#tab-1"], | ||
| + | #tab-2:target ~ #tab > ul li a[href$="#tab-2"], | ||
| + | #tab-3:target ~ #tab > ul li a[href$="#tab-3"], | ||
| + | #tab-4:target ~ #tab > ul li a[href$="#tab-4"] { | ||
| + | border: solid 1px red; | ||
| + | } | ||
| + | |||
| + | /*頁籤內容顯示*/ | ||
| + | #tab-1:target ~ #tab > div.tab-content-1, | ||
| + | #tab-2:target ~ #tab > div.tab-content-2, | ||
| + | #tab-3:target ~ #tab > div.tab-content-3, | ||
| + | #tab-4:target ~ #tab > div.tab-content-4 { | ||
| + | border: solid 1px red; | ||
| + | } | ||
| + | |||
| + | #tab{ | ||
| + | width: 400px; | ||
| + | background: #1caa5d; | ||
| + | border: solid 1px #1caa5d; | ||
| + | } | ||
| + | /* 頁籤ul */ | ||
| + | #tab>ul{ | ||
| + | overflow: hidden; | ||
| + | margin: 0; | ||
| + | padding: 10px 20px 0 20px; | ||
| + | } | ||
| + | #tab>ul>li{ | ||
| + | list-style-type: none; | ||
| + | |||
| + | } | ||
| + | #tab>ul>li>a{ | ||
| + | text-decoration: none; | ||
| + | font-size: 13px; | ||
| + | color: #333; | ||
| + | float: left; | ||
| + | padding: 10px; | ||
| + | margin-left: 5px; | ||
| + | } | ||
| + | |||
| + | /*頁籤div內容*/ | ||
| + | #tab>div { | ||
| + | clear:both; | ||
| + | padding:0 15px; | ||
| + | height:0; | ||
| + | overflow:hidden; | ||
| + | visibility:hidden; | ||
| + | -webkit-transition:all .4s ease-in-out; | ||
| + | -moz-transition:all .4s ease-in-out; | ||
| + | -ms-transition:all .4s ease-in-out; | ||
| + | -o-transition:all .4s ease-in-out; | ||
| + | transition:all .4s ease-in-out; | ||
| + | } | ||
| + | |||
| + | /* span:target */ | ||
| + | #tab-1:target, | ||
| + | #tab-2:target, | ||
| + | #tab-3:target, | ||
| + | #tab-4:target{ | ||
| + | border: solid 1px red; | ||
| + | } | ||
| + | |||
| + | /*第一筆的底色*/ | ||
| + | span:target ~ #tab > ul li:first-child a { | ||
| + | background:#1caa5d; | ||
| + | } | ||
| + | span:target ~ #tab > div:first-of-type { | ||
| + | visibility:hidden; | ||
| + | height:0; | ||
| + | padding:0 15px; | ||
| + | } | ||
| + | |||
| + | /*頁籤變換&第一筆*/ | ||
| + | span ~ #tab > ul li:first-child a, | ||
| + | #tab-1:target ~ #tab > ul li a[href$="#tab-1"], | ||
| + | #tab-2:target ~ #tab > ul li a[href$="#tab-2"], | ||
| + | #tab-3:target ~ #tab > ul li a[href$="#tab-3"], | ||
| + | #tab-4:target ~ #tab > ul li a[href$="#tab-4"] { | ||
| + | background: #fff; | ||
| + | } | ||
| + | |||
| + | /*頁籤內容顯示&第一筆*/ | ||
| + | span ~ #tab > div:first-of-type, | ||
| + | #tab-1:target ~ #tab > div.tab-content-1, | ||
| + | #tab-2:target ~ #tab > div.tab-content-2, | ||
| + | #tab-3:target ~ #tab > div.tab-content-3, | ||
| + | #tab-4:target ~ #tab > div.tab-content-4 { | ||
| + | visibility:visible; | ||
| + | height:200px; | ||
| + | background: #fff; | ||
| + | } | ||
Revision as of 06:26, 16 September 2017
