"
Team:NCTU Formosa/css/style
From 2014.igem.org
| (69 intermediate revisions not shown) | |||
| Line 3: | Line 3: | ||
*/ | */ | ||
@font-face { | @font-face { | ||
| - | font-family: | + | font-family: arial11; |
src: url(https://googledrive.com/host/0B1ue2WCVGhzBN1pZUTBUSm51NWc/Arvo-Regular.woff); | src: url(https://googledrive.com/host/0B1ue2WCVGhzBN1pZUTBUSm51NWc/Arvo-Regular.woff); | ||
| + | } | ||
| + | |||
| + | .card a{ | ||
| + | color:rgba(255, 153, 0, 1) !important; | ||
| + | color:rgba(255, 153, 0, 1); | ||
| + | text-decoration:underline; | ||
| + | } | ||
| + | |||
| + | #bodyContent a[href^="https://"] { | ||
| + | color:rgba(255, 153, 0, 1) !important; | ||
| + | color:rgba(255, 153, 0, 1); | ||
| + | text-decoration:underline; | ||
| + | } | ||
| + | |||
| + | table { | ||
| + | |||
| + | color: rgba(255, 255, 255, 1); | ||
| + | } | ||
| + | h6{ | ||
| + | color: rgba(249, 255, 0, 1); | ||
} | } | ||
h4 { | h4 { | ||
| - | font-size: | + | font-size: 150%; |
text-align:center; | text-align:center; | ||
font-family: arial; | font-family: arial; | ||
| - | color :# | + | color: #FFFC00; |
} | } | ||
| - | + | .navv{ | |
| - | + | margin:0px auto; | |
| + | margin-top:170px; | ||
| + | width:90% | ||
} | } | ||
| + | |||
h5 { | h5 { | ||
font-size: 130%; | font-size: 130%; | ||
| - | color :# | + | color: #FFF779; |
} | } | ||
#p-logo, #search-controls, #contentSub, .firstHeading, #catlinks { | #p-logo, #search-controls, #contentSub, .firstHeading, #catlinks { | ||
| Line 26: | Line 49: | ||
border-color:rgba(240, 0, 119, 0); | border-color:rgba(240, 0, 119, 0); | ||
width: auto; | width: auto; | ||
| + | color:rgba(0, 0, 0, 1); | ||
} | } | ||
div.thumb div { | div.thumb div { | ||
border: 1px solid #CCC; | border: 1px solid #CCC; | ||
padding: 2px; | padding: 2px; | ||
| - | background-color: # | + | background-color: #5C5C5C; |
font-size: 94%; | font-size: 94%; | ||
text-align: center; | text-align: center; | ||
overflow: hidden; | overflow: hidden; | ||
| + | color:white; | ||
} | } | ||
| Line 165: | Line 190: | ||
width:300px; | width:300px; | ||
} | } | ||
| - | #toc td > ul { | + | #toc td > ul { |
| - | background:url('https://static.igem.org/mediawiki/2014/ | + | -webkit-border-radius: 10px; |
| - | + | -moz-border-radius: 10px; | |
| + | border-radius: 14px; | ||
| + | background: url('https://static.igem.org/mediawiki/2014/0/0f/NCTUarrows1.png') no-repeat scroll right top rgba(6, 0, 0, 1); | ||
| + | } | ||
} | } | ||
td>ul { | td>ul { | ||
| Line 284: | Line 312: | ||
top:0px; | top:0px; | ||
width:100%; | width:100%; | ||
| - | height: | + | height:292px; |
margin:0; | margin:0; | ||
padding:0 0 0 0; | padding:0 0 0 0; | ||
| Line 291: | Line 319: | ||
box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); | box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); | ||
overflow: visible; | overflow: visible; | ||
| - | background-image : url("https://static.igem.org/mediawiki/2014/e/ | + | background-image : url("https://static.igem.org/mediawiki/2014/e/e8/Header1.jpg"); |
| + | background-size: contain; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position : top center ; | ||
| + | } | ||
| + | |||
| + | #header-wrapper2 { | ||
| + | top:0px; | ||
| + | width:100%; | ||
| + | height:292px; | ||
| + | margin:0; | ||
| + | padding:0 0 0 0; | ||
| + | -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); | ||
| + | -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); | ||
| + | box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); | ||
| + | overflow: visible; | ||
| + | background-image : url("https://static.igem.org/mediawiki/2014/3/33/HeaderINDEX.png.JPG"); | ||
background-size: cover; | background-size: cover; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| Line 298: | Line 342: | ||
#header{ | #header{ | ||
width:100%; | width:100%; | ||
| - | max-width: | + | max-width:1480px; |
height:56px; | height:56px; | ||
margin:0 auto; | margin:0 auto; | ||
| Line 306: | Line 350: | ||
#title { | #title { | ||
width:850px; | width:850px; | ||
| - | height: | + | height:167px; |
text-indent:-9999px; | text-indent:-9999px; | ||
margin: 0 auto; | margin: 0 auto; | ||
| Line 314: | Line 358: | ||
display:block; | display:block; | ||
| - | width: | + | width:100%; |
| - | height: | + | height:200px; |
text-indent:-9999px; | text-indent:-9999px; | ||
-webkit-transition: .7s; | -webkit-transition: .7s; | ||
| Line 339: | Line 383: | ||
} | } | ||
h3 { | h3 { | ||
| - | background-color: | + | background-color: rgba(229, 255, 57, 1); |
border-bottom: 2px solid #bbb; | border-bottom: 2px solid #bbb; | ||
padding-left: 10px; | padding-left: 10px; | ||
border-radius: 3px; | border-radius: 3px; | ||
| + | font-size:200%; | ||
| + | box-shadow: 0px 0px 12px 5px #FFF; | ||
} | } | ||
h4, h3, h5,p { | h4, h3, h5,p { | ||
| Line 352: | Line 398: | ||
} | } | ||
h4 span.mw-headline, h5 span.mw-headline { | h4 span.mw-headline, h5 span.mw-headline { | ||
| - | padding-top: 73px; | + | //padding-top: 73px; |
} | } | ||
#main-wrapper { | #main-wrapper { | ||
| Line 365: | Line 411: | ||
-webkit-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); | -webkit-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); | ||
box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); | box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); | ||
| - | background- | + | background-color:#888; |
} | } | ||
#main { | #main { | ||
| Line 436: | Line 482: | ||
overflow-x: hidden; | overflow-x: hidden; | ||
| - | background-color : # | + | background-color : #D0D0D0 ; |
} | } | ||
| Line 479: | Line 525: | ||
} | } | ||
| - | + | .link{ | |
| + | color:gray!important; | ||
| + | } | ||
div.card { | div.card { | ||
//width:865px; | //width:865px; | ||
margin: 0 auto; | margin: 0 auto; | ||
| - | background: | + | background: #133453; |
position: relative; | position: relative; | ||
padding: 15px; | padding: 15px; | ||
| Line 489: | Line 537: | ||
box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); | box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); | ||
font-family: arial; | font-family: arial; | ||
| - | color: # | + | color: #FFF; |
font-size: 120%; | font-size: 120%; | ||
-moz-border-radius: 2px; | -moz-border-radius: 2px; | ||
-webkit-border-radius: 2px; | -webkit-border-radius: 2px; | ||
border-radius: 2px; | border-radius: 2px; | ||
| + | box-shadow: 0px 0px 12px 7px #FFF; | ||
} | } | ||
| + | |||
.card p > b, .card li > b { | .card p > b, .card li > b { | ||
/*background-color: #FFFF66; | /*background-color: #FFFF66; | ||
| Line 500: | Line 550: | ||
padding-right:5px; | padding-right:5px; | ||
border-radius:3px;*/ | border-radius:3px;*/ | ||
| - | color: # | + | color: #FFC700; |
font-weight:700; | font-weight:700; | ||
} | } | ||
| Line 508: | Line 558: | ||
div.card p { | div.card p { | ||
margin: 0 0 15px 0!important; | margin: 0 0 15px 0!important; | ||
| + | text-align:justify; | ||
| + | text-justify:auto; | ||
} | } | ||
| - | + | ||
| - | + | ||
} | } | ||
| + | |||
div.card span.url { | div.card span.url { | ||
border-top: 1px solid #e5e5e5; | border-top: 1px solid #e5e5e5; | ||
| Line 537: | Line 589: | ||
max-width:100%; | max-width:100%; | ||
max-height:100%; | max-height:100%; | ||
| + | border: 1px solid rgba(255, 255, 255, 0); | ||
} | } | ||
.card p { | .card p { | ||
| Line 606: | Line 659: | ||
} | } | ||
.floatnone { | .floatnone { | ||
| - | border:1px solid | + | border: 1px solid rgba(255, 255, 255, 0); |
border-radius:5px; | border-radius:5px; | ||
-webkit-transition: .5s; | -webkit-transition: .5s; | ||
| Line 615: | Line 668: | ||
text-decoration: none!important; | text-decoration: none!important; | ||
} | } | ||
| - | + | ||
| - | + | ||
| - | + | ||
.flotenone .image:hover { | .flotenone .image:hover { | ||
text-decoration:none; | text-decoration:none; | ||
| Line 682: | Line 733: | ||
bottom:-30px; | bottom:-30px; | ||
left:-30px; | left:-30px; | ||
| - | background:# | + | background:#000; |
width:100px; | width:100px; | ||
height:100px; | height:100px; | ||
| Line 713: | Line 764: | ||
line-height:100px; | line-height:100px; | ||
text-align:center; | text-align:center; | ||
| + | color:white!important; | ||
} | } | ||
#back-top a { | #back-top a { | ||
| Line 728: | Line 780: | ||
} | } | ||
#back-top li a:hover { | #back-top li a:hover { | ||
| - | background:# | + | background:#000; |
| - | color: | + | color: #FF9C08 !important; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Latest revision as of 00:00, 18 October 2014
/* ---Calvin Hue
- /
@font-face {
font-family: arial11; src: url(https://googledrive.com/host/0B1ue2WCVGhzBN1pZUTBUSm51NWc/Arvo-Regular.woff);
}
.card a{ color:rgba(255, 153, 0, 1) !important; color:rgba(255, 153, 0, 1); text-decoration:underline; }
- bodyContent a[href^="https://"] {
color:rgba(255, 153, 0, 1) !important; color:rgba(255, 153, 0, 1); text-decoration:underline; }
table {
color: rgba(255, 255, 255, 1);
} h6{ color: rgba(249, 255, 0, 1); } h4 {
font-size: 150%;
text-align:center;
font-family: arial;
color: #FFFC00; } .navv{ margin:0px auto; margin-top:170px; width:90% }
h5 {
font-size: 130%;
color: #FFF779; }
- p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {
display: none; } div.thumb {
margin-bottom: 0.5em; border-color:rgba(240, 0, 119, 0); width: auto;
color:rgba(0, 0, 0, 1); } div.thumb div {
border: 1px solid #CCC; padding: 2px; background-color: #5C5C5C; font-size: 94%; text-align: center; overflow: hidden;
color:white; }
- footer-box {
width: auto; background:transparent; border:0; font-size:10px; }
- footer-box a {
color:black; }
- f-copyrightico {
margin-left:50px; } body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
selection {
background:#0BDA51; color:#fff; }
-moz-selection {
background:#0BDA51; color:#fff; }
-webkit-selection {
background:#0BDA51; color:#fff; }
top-section {
width:100%!important; height:11px!important; overflow:hidden; border-top:none!important; position:fixed; z-index: 5!important; top:0; background-color: lightgrey !important; -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); opacity:0.7; }
- menubar li a, #menubar li {
backgound: none!important; color:rgba(0, 174, 243, 1) !important; font:10px Quicksand; font-weight:400; text-transform:uppercase; }
- menubar li a:hover {
text-decoration:none; } .right-menu li a, .left-menu:hover { background-color:transparent!important; } .left-menu { margin-top:4px; padding-left: 10px; }
- cou {
width:1px; height:1px; float:left; opacity:0.01; overflow:hidden; }
- pt-login {
top: 4px; }
- content {
background: transparent; padding: 0; width: 100%; border: 0px; line-height:normal!important; }
- globalWrapper {
font-size:100%!important; padding:0!important; } p { margin: 0px!important; //text-align: justify; } ul.side { display:none; } .part_link { color: #38C04B; }
- toc {
background-color: transparent!important; z-index:22; position: absolute; left: -465px; top: 0px; border: 0!important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); }
- toc {
margin-left: 0px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- toc:hover {
margin-left: 251px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- toctitle {
display:none; } td>ul>li.active { // background: #D49E88
}
- toc ul, .toc ul {
margin: 0!important;
width:300px; }
- toc td > ul {
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 14px;
background: url('https://static.igem.org/mediawiki/2014/0/0f/NCTUarrows1.png') no-repeat scroll right top rgba(6, 0, 0, 1); } } td>ul { position:relative; background:#fff; width:250px; margin:auto; padding:0; list-style: none; overflow:hidden; }
td ul li a { width:225px; padding-left:20px; height:50px; line-height:50px; display:block; overflow:hidden; position:relative; text-decoration:none; text-transform:uppercase; font-size:14px; //background : #D49E88 ; //hahaa //border-right:5px solid #D49E88; color:#76321B!important; font-family:arial; font-weight:700; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .tocnumber { margin-right:10px; } .toc ul ul li a { line-height:25px; height:25px; font-size:12px; } /*ul ul .tocnumber { background:#666; border-radius:5px; color: white; height:19px; line-height:19px; margin-top:3px; padding-left:5px; padding-right:5px; display:block; float:left; }*/ td ul li a:hover { //color:#D49E88!important; // background:#76321B; //border-right:5px solid #76321B; text-decoration:none; }
td ul li.active a { //border-right:5px solid #76321B; color:#D49E88!important; //background:#76321B; text-decoration:none; }
- toc td>ul>li>ul li {
height:0; line-height:0; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; overflow:hidden; }
- toc td>ul>li:hover>ul li, #toc td>ul>li.active>ul li {
height:25px; line-height:25px; }
- {
margin:0; padding:0; } .clear { clear: both; } html, body { height:100%; margin:0; padding:0; } body {
font:14px helvetica, arial, Sans-serif; overflow-x:hidden;
background-color: #FFFFFF;
}
} a { text-decoration:none; } a img { border: none; } ul, li { margin:0; padding:0; }
- top-section {
height: auto!important; }
- header-wrapper {
top:0px; width:100%; height:292px; margin:0; padding:0 0 0 0; -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); overflow: visible;
background-image : url("
");
background-size: contain; background-repeat: no-repeat; background-position : top center ; }
- header-wrapper2 {
top:0px; width:100%; height:292px; margin:0; padding:0 0 0 0; -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); overflow: visible;
background-image : url("
");
background-size: cover; background-repeat: no-repeat; background-position : top center ; }
- header{
width:100%; max-width:1480px; height:56px; margin:0 auto; overflow: visible; margin-top:11px; }
- title {
width:850px; height:167px; text-indent:-9999px;
margin: 0 auto;
margin-bottom:9px; }
- title a {
display:block;
width:100%; height:200px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; }
- igemlogo a,#igemlogo2 a,#igemlogo3 a{
display:block; background-size: 40px 40px; background-repeat:no-repeat; background-position: 8px 8px; width:40px; height:46px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } h3 { background-color: rgba(229, 255, 57, 1); border-bottom: 2px solid #bbb; padding-left: 10px; border-radius: 3px; font-size:200%; box-shadow: 0px 0px 12px 5px #FFF; } h4, h3, h5,p { clear: both;
font-family: arial;
} h3 span.mw-headline { //padding-top: 103px; } h4 span.mw-headline, h5 span.mw-headline { //padding-top: 73px; }
- main-wrapper {
float:left; width:100%!important; min-height:100%; margin:0 auto; padding:0 0 0 0; background:#e4e4e4; border-bottom:1px solid #888888; -moz-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5);
background-color:#888;
}
- main {
float:left; width: 100%; height:100%; padding: 0px; margin:0 auto; }
- footer-wrapper {
width:100%; margin:0 auto; }
- footer {
padding-right:50px; }
- footer-text {
margin-top: 10px; margin-bottom: 20px; text-align: right!important; font-size:9px; } .author { display:none; }
- cover {
display:none; height: 100%; //min-width: 800px; height: 130px; background-size: cover!important; margin:auto 0;
-moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;
position:relative; }
- coverbox {
position:absolute; margin-left:50px; margin-right:50px; }
- cover #ctitle {
color: #000000 ; font-family: arial; font-size: 60px; font-weight: bold; border-bottom: 1px solid lightgrey; padding-bottom: 10px; }
- cover p {
color:white; font-family: arial; font-size: 20px; margin-top: 20px!important; margin-bottom: 20px!important; padding-top: 10px; }
- content-wrapper {
width: 100%; margin:0; padding:0; }
- realcontent {
margin:auto 0; }
- crw{
width:100%; overflow-x: hidden;
background-color : #D0D0D0 ;
}
- cr{
margin-left: 35px; min-width: 300px; }
- cl{
float: left; width: 300px; margin-left:-100%; } ul.side { width: 300px; height: 100%; float: left; padding: 0; } ul.side li { width: 280px; float: left; list-style: none; padding: 10px; } div.cont { z-index:2; width: 100%; height: 100%; float: right; padding: 0; } div.cont .li { width: 100%; float: left; list-style: none; margin: 10px; } .cont > .li > .card { width:75%; }
.link{ color:gray!important; } div.card { //width:865px; margin: 0 auto; background: #133453; position: relative; padding: 15px; right:30px; box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); font-family: arial; color: #FFF; font-size: 120%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; box-shadow: 0px 0px 12px 7px #FFF; }
.card p > b, .card li > b { /*background-color: #FFFF66; padding-left:5px; padding-right:5px; border-radius:3px;*/ color: #FFC700; font-weight:700; } ul.side div.card { width: 250px; } div.card p { margin: 0 0 15px 0!important; text-align:justify; text-justify:auto; }
}
div.card span.url { border-top: 1px solid #e5e5e5; background-image: url('https://static.igem.org/mediawiki/2013/9/91/Nctu-url.png'); background-repeat: no-repeat; padding: 6px 0 0 30px; height: 30px; display: block; margin-bottom: -20px !important; margin-top: 20px; text-indent:0!important; } div.card span.url a { color: #38C04B; text-decoration: none; top: 4px; //width: 250px; display: block; position: relative; } div.card > img, div.card p > img { width:100%; } .floatnone img { max-width:100%; max-height:100%; border: 1px solid rgba(255, 255, 255, 0); } .card p { text-indent:30px; } .card>p>a, .card>p>a:visited, .part_link:visited { color:#38C04B!important; } .card ol, .card ul { margin-left:30px; } .gallerytext p { text-indent:0!important; }
- changeFont {
display:none; z-index:3; hight:10pt float:right; position:absolute; right:45px; font:16px Quicksand; font-weight:400; } .increaseFont, .decreaseFont, .resetFont { display: inline-block; font-size: 16px; line-height: 18px; padding: 12px 15px 13px; background: #fff; color: #777!important; text-decoration: none!important; text-shadow: none; border-radius: 3px; box-shadow: none; transition: all 0.25s ease 0s; vertical-align:text-top; opacity:0.75; } .increaseFont:hover, .decreaseFont:hover, .resetFont:hover { opacity:1; } .changeFontText { text-transform: uppercase; color: black; } .changeFontArrow { color: #fff; padding-right:5px; padding-left:5px; } .floatnone .image::after { background:#74C365; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; border-radius:2px; color:white; content: attr(title); bottom: 0; height: 25%; font-size: 12px; display:inline-block; margin-bottom:20px; text-decoration:none!important; margin-left:100px; margin-right:100px; } .floatnone { border: 1px solid rgba(255, 255, 255, 0); border-radius:5px; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; text-decoration: none!important; }
.flotenone .image:hover { text-decoration:none; } .nobor, .nobor:hover { border:0!important; } .image { cursor:default; } .undetermined { border-bottom: red solid 1px; //display:none; } .undetermined:after {
content: "\5F85\66F4\6539"; background:red; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px red solid; padding-left:5px; padding-right:5px;
} .newc { border-bottom: #99ccff solid 1px; } .newc:after {
content: "NEW"; background:#99ccff; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px #99ccff solid; padding-left:5px; padding-right:5px;
} .newd { border-bottom: #6B8E23 solid 1px; } .newd:after {
content: "NEW DONE"; background:#6B8E23; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px #6B8E23 solid; padding-left:5px; padding-right:5px;
}
- back-top {
z-index:9; display: block; position:fixed; bottom:-30px; left:-30px; background:#000; width:100px; height:100px; margin:auto; padding:0; list-style: none; overflow:hidden; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- back-top:hover {
bottom:-5px; left:-5px; transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); }
- back-top li, #back-top li a {
display:block; width:100px; height:100px; line-height:100px; text-align:center; color:white!important; }
- back-top a {
text-decoration:none; text-transform:uppercase; font-size:14px; color:#686868!important; font-family: arial; font-weight:700; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- back-top li a:hover {
background:#000; color: #FF9C08 !important; text-decoration:none; } h6 { border-top: 1px solid #999; } .ref { font-size: 10px; font-style: italic; } .toclevel-1 .active a { color: red!important; } .tocnumber { display: inline-block; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .toctext { display: inline-block; width:185px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .nocap .image::after {
display: none!important;
}
- abgne-block-20120327 {
width: 640px; margin:0px auto }
- abgne-block-20120327 ul, #abgne-block-20120327 li {
list-style: none; margin: 0; padding: 0; }
- abgne-block-20120327 .tabs li {
float: left; margin: 0 0 -1px 5px; border: 1px solid #ddd; background: #fafafa; height: 32px; cursor: pointer; border-radius: 5px 5px 0 0; }
- abgne-block-20120327 .tabs li.active {
background: #fff; padding-bottom: 1px; border-bottom: none; }
- abgne-block-20120327 .tabs li.hover{
background: #f5f5f5; }
- abgne-block-20120327 .tabs span {
display: block; float: left; overflow: hidden; padding: 7px 15px 5px 15px; }
- abgne-block-20120327 .tab_container {
clear: both; border: 1px solid #DDD; background: #fff; overflow: hidden; border-radius: 5px; }
- abgne-block-20120327 .tab_container ul {
position: relative; height: 320px; overflow: hidden; }
- abgne-block-20120327 .tab_container .tab_content li {
position: absolute; width: 610px; height: 100%; padding: 15px; margin-top: 10px; background: #fff; }
- abgne-block-20120327 .tab_container .tab_content li img {
display: block; float: left; margin-right: 15px; }
- abgne-block-20120327 .tab_container .tab_content li .tab_title {
font-size: 22px; line-height: 22px; margin: 5px 0 15px; }
<script> $(function(){ // 預設顯示第一個頁籤 // 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出 // 同時也要取得 .tab_content 的寬 var _default = 0, $block = $('#abgne-block-20120327'), $tabs = $block.find('.tabs'), $tabsLi = $tabs.find('li'), $tab_content = $block.find('.tab_content'), $tab_contentLi = $tab_content.find('li'), _width = $tab_content.width();
// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式 // 移出時要移除 .hover 樣式 $tabsLi.hover(function(){ var $this = $(this);
// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作 if($this.hasClass('active')) return;
$this.toggleClass('hover'); }).click(function(){ // 當滑鼠點擊 .tabs li 時 // 先取出被點擊及目前顯示的頁籤與索引 var $active = $tabsLi.filter('.active').removeClass('active'), _activeIndex = $active.index(), $this = $(this).addClass('active').removeClass('hover'), _index = $this.index(), isNext = _index > _activeIndex;
// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作 if(_activeIndex == _index) return;
// 依索引大或小來決定移動的位置 $tab_contentLi.eq(_activeIndex).stop().animate({ left: isNext ? -_width : _width }).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({ left: 0 }); });
// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容 $tabsLi.eq(_default).addClass('active'); $tab_contentLi.eq(_default).siblings().css({ left: _width }); }); </script>
@charset "UTF-8";
/*
CSS By Away
http://www.dfuns.idv.tw
*/
