Team:BIT/human practice.css
From 2014.igem.org
(11 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
/*其他*/ | /*其他*/ | ||
body{ overflow-x:hidden;} | body{ overflow-x:hidden;} | ||
+ | p{ font-size:18px;} | ||
- | #footer1{ position:absolute;top: | + | #footer1{ position:absolute;top:1200px;z-index:-1;} |
+ | #footer-box {margin-top: 1300px;border: none;} | ||
#left{ width:211px;height:300px; position:absolute; top:104px; left:30px;margin:10px 10px 0 0 ; z-index:2;} | #left{ width:211px;height:300px; position:absolute; top:104px; left:30px;margin:10px 10px 0 0 ; z-index:2;} | ||
#right{ width:704px;height:800px;position:absolute; top:10px; left:230px;margin:10px 0 0 0 ; color:#666; } | #right{ width:704px;height:800px;position:absolute; top:10px; left:230px;margin:10px 0 0 0 ; color:#666; } | ||
- | + | ul{list-style: none;} | |
*{margin:0;padding:0;list-style-type:none;} | *{margin:0;padding:0;list-style-type:none;} | ||
a,img{border:0;} | a,img{border:0;} | ||
Line 26: | Line 28: | ||
/* tour */ | /* tour */ | ||
- | #tour{position:relative | + | #tour{position:relative;position:relative;padding-top:0;min-height:700px;margin-top:-1050px;z-index:2;text-align: justify; |
+ | text-indent: 2em;} | ||
+ | |||
+ | #tour ::-webkit-scrollbar { | ||
+ | width: 8px; | ||
+ | } | ||
+ | ::-webkit-scrollbar-button { | ||
+ | width: 8px; | ||
+ | height:5px; | ||
+ | } | ||
+ | ::-webkit-scrollbar-track { | ||
+ | background:#eee; | ||
+ | border: thin solid lightgray; | ||
+ | box-shadow: 0px 0px 3px #dfdfdf inset; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | ::-webkit-scrollbar-thumb { | ||
+ | background:#999; | ||
+ | border: thin solid gray; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | ::-webkit-scrollbar-thumb:hover { | ||
+ | background:#7d7d7d; | ||
+ | } | ||
#img{list-style:none;} | #img{list-style:none;} | ||
#img-slider .slide{width:100%;background:#fff;position:absolute; list-style-image:none;} | #img-slider .slide{width:100%;background:#fff;position:absolute; list-style-image:none;} | ||
Line 37: | Line 62: | ||
.switcher-wrap{position:relative;padding-bottom:60px;padding-left:80px;padding-right:80px;} | .switcher-wrap{position:relative;padding-bottom:60px;padding-left:80px;padding-right:80px;} | ||
.switcher-wrap.slider{padding-left:380px;padding-right:380px;} | .switcher-wrap.slider{padding-left:380px;padding-right:380px;} | ||
- | .switcher-wrap.slider #img-slider .img{-webkit-box-shadow:0 4px 20px rgba(0,0,0,0.4);-moz-box-shadow:0 4px 20px rgba(0,0,0,0.4);-ms-box-shadow:0 4px 20px rgba(0,0,0,0.4);box-shadow:0 4px 20px rgba(0,0,0,0.4);border-color:#fff;list-style: none;} | + | .switcher-wrap.slider #img-slider .img{-webkit-box-shadow:0 4px 20px rgba(0,0,0,0.4);-moz-box-shadow:0 4px 20px rgba(0,0,0,0.4);-ms-box-shadow:0 4px 20px rgba(0,0,0,0.4);box-shadow:0 4px 20px rgba(0,0,0,0.4);border-color:#fff;list-style: none;overflow:scroll;overflow-x: hidden;padding:15px; } |
- | .switcher-wrap a.next,.switcher-wrap a.prev{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;position:absolute;width:50px;height:50px;top:50%;margin-top:-25px;bottom:0;left:0;background:url(../ | + | .switcher-wrap a.next,.switcher-wrap a.prev{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;position:absolute;width:50px;height:50px;top:50%;margin-top:-25px;bottom:0;left:0;background:url(https://static.igem.org/mediawiki/2014/a/ab/BIT_sprites.png) no-repeat 16px 12px;z-index:1000;-webkit-transition:background-color 300ms linear;-moz-transition:background-color 300ms linear;-o-transition:background-color 300ms linear;-ms-transition:background-color 300ms linear;transition:background-color 300ms linear;} |
.switcher-wrap a.next:hover,.switcher-wrap a.prev:hover{background-color:rgba(16,175,139,0.1);} | .switcher-wrap a.next:hover,.switcher-wrap a.prev:hover{background-color:rgba(16,175,139,0.1);} | ||
.switcher-wrap a.prev{right:0;left:auto;background-position:-63px 12px;} | .switcher-wrap a.prev{right:0;left:auto;background-position:-63px 12px;} |
Latest revision as of 12:42, 16 October 2014
@charset "utf-8"; /* CSS Document */
/*其他*/
body{ overflow-x:hidden;}
p{ font-size:18px;}
- footer1{ position:absolute;top:1200px;z-index:-1;}
- footer-box {margin-top: 1300px;border: none;}
- left{ width:211px;height:300px; position:absolute; top:104px; left:30px;margin:10px 10px 0 0 ; z-index:2;}
- right{ width:704px;height:800px;position:absolute; top:10px; left:230px;margin:10px 0 0 0 ; color:#666; }
ul{list-style: none;}
- {margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:hover{text-decoration: none;}
/* tour */
- tour{position:relative;position:relative;padding-top:0;min-height:700px;margin-top:-1050px;z-index:2;text-align: justify;
text-indent: 2em;}
- tour ::-webkit-scrollbar {
width: 8px; } ::-webkit-scrollbar-button { width: 8px; height:5px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px #dfdfdf inset; border-radius:10px; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; border-radius:10px; } ::-webkit-scrollbar-thumb:hover { background:#7d7d7d; }
- img{list-style:none;}
- img-slider .slide{width:100%;background:#fff;position:absolute; list-style-image:none;}
- img-slider .slide .img{margin:10px auto;border:none;list-style: none;}
- img-slider .img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(204,205,206,5);-moz-box-shadow:0 1px 0 rgba(204,205,206,5);-ms-box-shadow:0 1px 0 rgba(204,205,206,5);box-shadow:0 1px 0 rgba(204,205,206,5);border:1px solid #edeeee;background-color:#fff;width:780px;height:500px;position:relative;list-style: none;}
- img-slider .img img{display:block;width:100%;list-style: none;}
- img-slider .img .label{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-ms-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-ms-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;background:#35a5ca;padding:2.5% 0;position:absolute;bottom:0;left:0;right:0;font-weight:400;text-align:center;color:#fff;font-size:150%;list-style: none;}
- img-slider .img:first-child{display:block;list-style: none;}
.switcher-wrap{position:relative;padding-bottom:60px;padding-left:80px;padding-right:80px;} .switcher-wrap.slider{padding-left:380px;padding-right:380px;} .switcher-wrap.slider #img-slider .img{-webkit-box-shadow:0 4px 20px rgba(0,0,0,0.4);-moz-box-shadow:0 4px 20px rgba(0,0,0,0.4);-ms-box-shadow:0 4px 20px rgba(0,0,0,0.4);box-shadow:0 4px 20px rgba(0,0,0,0.4);border-color:#fff;list-style: none;overflow:scroll;overflow-x: hidden;padding:15px; } .switcher-wrap a.next,.switcher-wrap a.prev{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;position:absolute;width:50px;height:50px;top:50%;margin-top:-25px;bottom:0;left:0;background:url() no-repeat 16px 12px;z-index:1000;-webkit-transition:background-color 300ms linear;-moz-transition:background-color 300ms linear;-o-transition:background-color 300ms linear;-ms-transition:background-color 300ms linear;transition:background-color 300ms linear;} .switcher-wrap a.next:hover,.switcher-wrap a.prev:hover{background-color:rgba(16,175,139,0.1);} .switcher-wrap a.prev{right:0;left:auto;background-position:-63px 12px;} .switcher-wrap ul.switcher{text-align:center;position:absolute;left:0;right:0;bottom:0;} .switcher-wrap ul.switcher li{display:inline-block;padding:2px;border:1px solid #35a5ca;border-radius:100%;margin:0 4px;} .switcher-wrap ul.switcher li a{display:block;width:14px;height:14px;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;border-radius:100%;-o-transition:background 0.30s ease-in-out;-webkit-transition:background 0.30s ease-in-out;-moz-transition:background 0.30s ease-in-out;transition:background 0.30s ease-in-out;} .switcher-wrap ul.switcher li a:hover,.switcher-wrap ul.switcher li.active a{background:#35a5ca;} .switcher-wrap ul.switcher li:last-child{margin-right:0;}