Team:UESTC Life/css/style.css

From 2013.igem.org

(Difference between revisions)
 
(89 intermediate revisions not shown)
Line 4: Line 4:
}
}
body{
body{
-
background:url(https://static.igem.org/mediawiki/2013/e/e8/Uestclifeback1.jpg);
+
background:url(https://static.igem.org/mediawiki/2013/6/63/UestclifelifeBackgroundvvbdfgdfg.jpg);
-
         background-size:cover;
+
         background-size:cover;
 +
        background-attachment:fixed;
font-family: Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
color:#444;
color:#444;
Line 51: Line 52:
}
}
.booklet .b-wrap-right {
.booklet .b-wrap-right {
-
background:#efefef url(https://static.igem.org/mediawiki/2013/d/d3/Uestclifebiot_right_bg.jpg) no-repeat top left;
+
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 95: Line 96:
font-size:16px;
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 111: Line 114:
}
}
.book_wrapper a.demo{
.book_wrapper a.demo{
-
margin-left:50px;
+
float:right;
}
}
.book_wrapper a.article:hover,
.book_wrapper a.article:hover,
Line 167: 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:9999;
+
z-index:999;
-moz-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-border-radius:20px;
Line 177: Line 180:
.wrap {width:380px; height:218px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.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 img {border:0;}
-
.wrap i {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; background:#000; filter: alpha(opacity=40);
+
.wrap i {display:block; width:320px; height:230px; position:absolute; left:30px; top:180px; z-index:1; background:rgba(0, 0, 0, 0.4);  
-
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
+
  -webkit-transition: all 0.6s ease-in-out; }
  -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; background:transparent; font-size:18px; color:#fff; padding:0; margin:0; line-height:16px;
+
.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;
-webkit-transition: all 0.6s ease-in-out;
}
}

Latest revision as of 16:20, 26 September 2013

  • {

margin:0; padding:0; } body{ background:url(UestclifelifeBackgroundvvbdfgdfg.jpg);

       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(Uestclifebiot_left_bg.jpg) 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(Uestclifebiot_right_bg.jpg) 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(Uestclifebiot_bg.png) no-repeat 9px 27px; } .book_wrapper h1{ color:#13386a; margin:5px 5px 5px 15px; font-size:26px; background:transparent url(Uestclifebiot_h1.png) 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(Uestclifebiot_circle.png) 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(Uestclifebiot_buttons.png) 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(Uestclifebiot_ajax-loader.gif) 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;}