"
Team:UESTC Life/css/style.css
From 2013.igem.org
Neptune Yu (Talk | contribs) |
|||
| (108 intermediate revisions not shown) | |||
| Line 4: | Line 4: | ||
} | } | ||
body{ | body{ | ||
| - | background: | + | background:url(https://static.igem.org/mediawiki/2013/6/63/UestclifelifeBackgroundvvbdfgdfg.jpg); |
| + | background-size:cover; | ||
| + | background-attachment:fixed; | ||
font-family: Arial, Helvetica, sans-serif; | font-family: Arial, Helvetica, sans-serif; | ||
color:#444; | color:#444; | ||
| Line 50: | Line 52: | ||
} | } | ||
.booklet .b-wrap-right { | .booklet .b-wrap-right { | ||
| - | background:# | + | background:#fff url(https://static.igem.org/mediawiki/2013/d/d3/Uestclifebiot_right_bg.jpg) no-repeat top left; |
-webkit-border-top-right-radius: 10px; | -webkit-border-top-right-radius: 10px; | ||
-webkit-border-bottom-right-radius: 10px; | -webkit-border-bottom-right-radius: 10px; | ||
| Line 80: | Line 82: | ||
width:905px; | width:905px; | ||
height:540px; | height:540px; | ||
| - | top:- | + | top:-85px;/* 注释内容1 */ |
position:relative; | position:relative; | ||
background:transparent url(https://static.igem.org/mediawiki/2013/2/25/Uestclifebiot_bg.png) no-repeat 9px 27px; | background:transparent url(https://static.igem.org/mediawiki/2013/2/25/Uestclifebiot_bg.png) no-repeat 9px 27px; | ||
| Line 92: | Line 94: | ||
} | } | ||
.book_wrapper p{ | .book_wrapper p{ | ||
| - | font-size: | + | font-size:16px; |
margin:5px 5px 5px 15px; | margin:5px 5px 5px 15px; | ||
| + | height:130px; | ||
| + | overflow-y:auto; | ||
} | } | ||
.book_wrapper a.article, | .book_wrapper a.article, | ||
| Line 110: | Line 114: | ||
} | } | ||
.book_wrapper a.demo{ | .book_wrapper a.demo{ | ||
| - | + | float:right; | |
} | } | ||
.book_wrapper a.article:hover, | .book_wrapper a.article:hover, | ||
| Line 166: | Line 170: | ||
background: #000 url(https://static.igem.org/mediawiki/2013/f/f4/Uestclifebiot_ajax-loader.gif) no-repeat 10px 50%; | background: #000 url(https://static.igem.org/mediawiki/2013/f/f4/Uestclifebiot_ajax-loader.gif) no-repeat 10px 50%; | ||
opacity: 0.7; | opacity: 0.7; | ||
| - | z-index: | + | z-index:999; |
-moz-border-radius:20px; | -moz-border-radius:20px; | ||
-webkit-border-radius:20px; | -webkit-border-radius:20px; | ||
| Line 172: | Line 176: | ||
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); | ||
} | } | ||
| + | |||
| + | .wrap a {display:block; width:350px; height:240px; text-decoration:none; color:#000;} | ||
| + | .wrap {width:380px; height:218px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;} | ||
| + | .wrap img {border:0;} | ||
| + | .wrap i {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; background:rgba(0, 0, 0, 0.4); | ||
| + | -webkit-transition: all 0.6s ease-in-out; } | ||
| + | .wrap p {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; font-size:18px; color:#fff; padding:0; margin:0; line-height:16px; | ||
| + | -webkit-transition: all 0.6s ease-in-out; | ||
| + | } | ||
| + | .wrap p b {display:block; font-size:24px; color:#47ff4a; text-align:center; margin:0; padding:0; line-height:30px;} | ||
| + | .wrap p l {display:block; font-size:24px; color:#fff143; text-align:center; margin:0; padding:0; line-height:30px;} | ||
| + | .wrap p span {display:block; padding:10px; line-height:20px;} | ||
| + | |||
| + | .wrap a:hover {direction:ltr;} | ||
| + | .wrap a:hover i {top:10px;} | ||
| + | .wrap a:hover p {top:10px;} | ||
| + | |||
| + | .clear {clear:left;} | ||
Latest revision as of 16:20, 26 September 2013
- {
margin:0;
padding:0;
}
body{
background:url(
);
background-size:cover;
background-attachment:fixed;
font-family: Arial, Helvetica, sans-serif;
color:#444;
font-size:12px;
color: #000;
}
h1{
color:#2F1B0C;
font-size:40px;
margin:20px 0px 0px 20px;
}
span.reference{
font-family:Arial;
display:block;
font-size:12px;
text-align:center;
margin-bottom:10px;
}
span.reference a{
color:#000;
text-transform:uppercase;
text-decoration:none;
margin:0px 20px;
}
span.reference a:hover{
color:#ddd;
}
/* Booklet jQuery Plugin Style*/
.booklet{
-moz-box-shadow:0px 0px 1px #fff;
-webkit-box-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 1px #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.booklet .b-wrap-left {
background:#fff url(
) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
background:#fff url(
) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.booklet .b-counter {
bottom:10px;
position:absolute;
display:block;
width:90%;
height:20px;
border-top:1px solid #ddd;
color:#222;
text-align:center;
font-size:12px;
padding:5px 0 0;
background:transparent;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:905px;
height:540px;
top:-85px;/* 注释内容1 */
position:relative;
background:transparent url(
) no-repeat 9px 27px;
}
.book_wrapper h1{
color:#13386a;
margin:5px 5px 5px 15px;
font-size:26px;
background:transparent url(
) no-repeat bottom left;
padding-bottom:7px;
}
.book_wrapper p{
font-size:16px;
margin:5px 5px 5px 15px;
height:130px;
overflow-y:auto;
}
.book_wrapper a.article,
.book_wrapper a.demo{
background:transparent url(
) no-repeat 50% 0px;
display:block;
width:95px;
height:41px;
text-decoration:none;
outline:none;
font-size:16px;
color:#555;
float:left;
line-height:41px;
padding-left:47px;
}
.book_wrapper a.demo{
float:right;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
background-position:50% -41px;
color:#13386a;
}
.book_wrapper img{
margin:10px 0px 5px 35px;
width:300px;
padding:4px;
border:1px solid #ddd;
-moz-box-shadow:1px 1px 1px #fff;
-webkit-box-shadow:1px 1px 1px #fff;
box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
border:1px solid #E6E3C2;
}
a#next_page_button,
a#prev_page_button{
display:none;
position:absolute;
width:41px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(
) no-repeat 0px -40px;
}
a#prev_page_button{
left:-30px;
}
a#next_page_button{
right:-30px;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(
) no-repeat 10px 50%;
opacity: 0.7;
z-index:999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.wrap a {display:block; width:350px; height:240px; text-decoration:none; color:#000;} .wrap {width:380px; height:218px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;} .wrap img {border:0;} .wrap i {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; background:rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.6s ease-in-out; }
.wrap p {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; font-size:18px; color:#fff; padding:0; margin:0; line-height:16px; -webkit-transition: all 0.6s ease-in-out; } .wrap p b {display:block; font-size:24px; color:#47ff4a; text-align:center; margin:0; padding:0; line-height:30px;} .wrap p l {display:block; font-size:24px; color:#fff143; text-align:center; margin:0; padding:0; line-height:30px;} .wrap p span {display:block; padding:10px; line-height:20px;}
.wrap a:hover {direction:ltr;} .wrap a:hover i {top:10px;} .wrap a:hover p {top:10px;}
.clear {clear:left;}
