"
Team:SYSU-Software/humanpra.css
From 2013.igem.org
Guoskyhero (Talk | contribs) |
|||
| (6 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| + | *{list-style-type:none;} | ||
| + | /* zoombox */ | ||
| + | .zoombox{width:970px;margin:20px auto 0 auto;} | ||
| + | .zoompic{width:968px;height:500px;background:url(https://static.igem.org/mediawiki/2013/4/42/Loading.gif) no-repeat 50% 50%;text-align:center;} | ||
| + | .zoompic img{height: 500px;width:auto;margin:auto;} | ||
| + | .sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;} | ||
| + | .sliderbox .arrow-btn{z-index:1000;width:38px;height:76px;background:url(https://static.igem.org/mediawiki/2013/e/ed/Arrow-btn.png) no-repeat;cursor:pointer;} | ||
| + | .sliderbox #btn-left{float:left;background-position:0 0;} | ||
| + | .sliderbox #btn-left.dasabled{background-position:0 -76px;} | ||
| + | .sliderbox #btn-right{float:right;background-position:-38px 0;} | ||
| + | .sliderbox #btn-right.dasabled{background-position:-38px -76px;} | ||
| + | .sliderbox .slider{float:left;height:76px;width:870px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;} | ||
| + | .sliderbox .slider ul{position:absolute;left:0;width:999em;} | ||
| + | .sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;} | ||
| + | .sliderbox .slider li img{border:solid 1px #dfdfdf;} | ||
| + | .sliderbox .slider li.current img{border:solid 1px #3366cc;} | ||
| + | |||
| + | |||
| + | |||
| + | |||
*{ | *{ | ||
padding:0px; | padding:0px; | ||
| Line 11: | Line 31: | ||
/*human practice container*/ | /*human practice container*/ | ||
#practice-container{ | #practice-container{ | ||
| - | width: | + | width: 100%; |
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
| Line 20: | Line 40: | ||
background-color: white; | background-color: white; | ||
width:100%; | width:100%; | ||
| + | margin: auto; | ||
} | } | ||
#practice-content-image{ | #practice-content-image{ | ||
padding-top: 8px; | padding-top: 8px; | ||
| - | width: | + | width: 980px; |
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
#practice-content-image img{ | #practice-content-image img{ | ||
| - | width: | + | width: 100%; |
| - | + | ||
} | } | ||
#practice-content-header{ | #practice-content-header{ | ||
padding-top: 40px; | padding-top: 40px; | ||
| - | width: | + | width: 290px; |
margin: 0 auto; | margin: 0 auto; | ||
| Line 52: | Line 72: | ||
} | } | ||
#practice-introduction-text{ | #practice-introduction-text{ | ||
| - | padding-top: | + | padding-top: 30px; |
width: 800px; | width: 800px; | ||
margin:0 auto; | margin:0 auto; | ||
| Line 67: | Line 87: | ||
#practice-slide{ | #practice-slide{ | ||
padding-bottom: 60px; | padding-bottom: 60px; | ||
| + | width: 980px; | ||
| + | margin: 0 auto; | ||
} | } | ||
/*human practice content*/ | /*human practice content*/ | ||
#practice-game{ | #practice-game{ | ||
background-color: #dff5f2; | background-color: #dff5f2; | ||
| + | margin: auto; | ||
| + | width: 980px; | ||
} | } | ||
#game-header{ | #game-header{ | ||
| Line 87: | Line 111: | ||
#game-presentaion img{ | #game-presentaion img{ | ||
width:500px; | width:500px; | ||
| + | height:350px; | ||
} | } | ||
#game-introdution{ | #game-introdution{ | ||
margin-left: 30px; | margin-left: 30px; | ||
| - | width: | + | width: 470px; |
display: block; | display: block; | ||
text-align: justify; | text-align: justify; | ||
| Line 119: | Line 144: | ||
.thumbnails { | .thumbnails { | ||
cursor: pointer; | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | #top_board.rotate { | ||
| + | transform-origin: 50% 0%; | ||
| + | -webkit-transform-origin: 50% 0%; | ||
| + | -moz-transform-origin: 50% 0%; | ||
| + | -o-transform-origin: 50% 0%; | ||
| + | animation: myrotate 2s linear; | ||
| + | -webkit-animation: myrotate 2s linear; | ||
| + | -moz-animation: myrotate 2s linear; | ||
| + | -o-animation: myrotate 2s linear; | ||
| + | } | ||
| + | |||
| + | @keyframes myrotate { | ||
| + | 0% {transform:rotate(0deg);} | ||
| + | 25% {transform:rotate(30deg);} | ||
| + | 75% {transform:rotate(-20deg);} | ||
| + | 100% {transform:rotate(0deg);} | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes myrotate { | ||
| + | 0% {-webkit-transform:rotate(0deg);} | ||
| + | 25% {-webkit-transform:rotate(30deg);} | ||
| + | 75% {-webkit-transform:rotate(-20deg);} | ||
| + | 100% {-webkit-transform:rotate(0deg);} | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes myrotate { | ||
| + | 0% {-moz-transform:rotate(0deg);} | ||
| + | 25% {-moz-transform:rotate(30deg);} | ||
| + | 75% {-moz-transform:rotate(-20deg);} | ||
| + | 100% {-moz-transform:rotate(0deg);} | ||
| + | } | ||
| + | |||
| + | @-o-keyframes myrotate { | ||
| + | 0% {-o-transform:rotate(0deg);} | ||
| + | 25% {-o-transform:rotate(30deg);} | ||
| + | 75% {-o-transform:rotate(-20deg);} | ||
| + | 100% {-o-transform:rotate(0deg);} | ||
| + | } | ||
| + | #practice-top .medal { | ||
| + | width: 80px; | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | #practice-top { | ||
| + | text-align: center; | ||
| + | vertical-align: top; | ||
| + | border-top: solid 8px #6f3802; | ||
| + | width: 100%; | ||
| + | padding-bottom: 15px; | ||
| + | } | ||
| + | #top_board { | ||
| + | padding: 0 50px; | ||
} | } | ||
Latest revision as of 02:49, 28 September 2013
- {list-style-type:none;}
/* zoombox */
.zoombox{width:970px;margin:20px auto 0 auto;}
.zoompic{width:968px;height:500px;background:url(
) no-repeat 50% 50%;text-align:center;}
.zoompic img{height: 500px;width:auto;margin:auto;}
.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
.sliderbox .arrow-btn{z-index:1000;width:38px;height:76px;background:url(
) no-repeat;cursor:pointer;}
.sliderbox #btn-left{float:left;background-position:0 0;}
.sliderbox #btn-left.dasabled{background-position:0 -76px;}
.sliderbox #btn-right{float:right;background-position:-38px 0;}
.sliderbox #btn-right.dasabled{background-position:-38px -76px;}
.sliderbox .slider{float:left;height:76px;width:870px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
.sliderbox .slider ul{position:absolute;left:0;width:999em;}
.sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}
.sliderbox .slider li img{border:solid 1px #dfdfdf;}
.sliderbox .slider li.current img{border:solid 1px #3366cc;}
- {
padding:0px; margin: 0px; } body { height: 100%; width: 100%; font-family: 'Arial'; }
/*human practice container*/
- practice-container{
width: 100%; margin: 0 auto; }
- practice-top-image{
width: 100%; }
- practice-content{
background-color: white; width:100%; margin: auto; }
- practice-content-image{
padding-top: 8px; width: 980px; margin: 0 auto; }
- practice-content-image img{
width: 100%; }
- practice-content-header{
padding-top: 40px;
width: 290px; margin: 0 auto;
font-size: 35px; color: #34495e; font-weight: bolder; }
- practice-introduction{
padding-top: 40px;
width: 151px; margin:0 auto;
font-size: 25px; color:#65d2c0; font-weight: bolder; }
- practice-introduction-text{
padding-top: 30px; width: 800px; margin:0 auto;
text-align: justify; font-size: 18px; line-height: 25px; }
- practice-slide{
margin-top: 100px; }
- practice-slide{
padding-bottom: 60px; width: 980px; margin: 0 auto; } /*human practice content*/
- practice-game{
background-color: #dff5f2; margin: auto; width: 980px; }
- game-header{
text-align: center; padding-top: 50px; font-size: 33px; color: #34495e; font-weight: bolder;
}
#game-show{
padding-top: 60px; padding-bottom: 110px; width: 968px; margin: 0 auto;
}
#game-presentaion img{
width:500px;
height:350px;
}
#game-introdution{
margin-left: 30px; width: 470px; display: block; text-align: justify; font-size: 18px; line-height: 25px;
}
/*footer*/
#sysu-footer{
width: 100%; margin:0 auto;
position: relative; bottom: 0px; overflow: hidden;
background-color: #dff5f2; }
- bottom-image{
width: 100%; }
a:focus{ outline-color:#544444; }
.thumbnails { cursor: pointer; }
- top_board.rotate {
transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; animation: myrotate 2s linear; -webkit-animation: myrotate 2s linear; -moz-animation: myrotate 2s linear; -o-animation: myrotate 2s linear; }
@keyframes myrotate { 0% {transform:rotate(0deg);} 25% {transform:rotate(30deg);} 75% {transform:rotate(-20deg);} 100% {transform:rotate(0deg);} }
@-webkit-keyframes myrotate { 0% {-webkit-transform:rotate(0deg);} 25% {-webkit-transform:rotate(30deg);} 75% {-webkit-transform:rotate(-20deg);} 100% {-webkit-transform:rotate(0deg);} }
@-moz-keyframes myrotate { 0% {-moz-transform:rotate(0deg);} 25% {-moz-transform:rotate(30deg);} 75% {-moz-transform:rotate(-20deg);} 100% {-moz-transform:rotate(0deg);} }
@-o-keyframes myrotate { 0% {-o-transform:rotate(0deg);} 25% {-o-transform:rotate(30deg);} 75% {-o-transform:rotate(-20deg);} 100% {-o-transform:rotate(0deg);} }
- practice-top .medal {
width: 80px; vertical-align: top; }
- practice-top {
text-align: center; vertical-align: top; border-top: solid 8px #6f3802; width: 100%; padding-bottom: 15px; }
- top_board {
padding: 0 50px; }
