Team:BIT/public.css
From 2014.igem.org
(Created page with "@charset "utf-8"; /* CSS Document */ - →框架: body{ font-family:"helvetica"; margin:0; cursor:url(../img/BIT_Downloads%20Library.png)} #main_container{ background:#FFF; width:1...") |
|||
(41 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
@charset "utf-8"; | @charset "utf-8"; | ||
/* CSS Document */ | /* CSS Document */ | ||
+ | #globalWrapper | ||
+ | { | ||
+ | |||
+ | background-color:transparent; | ||
+ | border:none; | ||
+ | } | ||
+ | #top-section{border:none;height: 20px;} | ||
+ | #menubar a{ color:#000;} | ||
+ | #menubar a:hover{ color:#35a5ca;} | ||
+ | #menubar a:visited{ color:#999999;} | ||
+ | .right-menu li a { background:none;text-decoration: none;} | ||
+ | .left-menu:hover { | ||
+ | background:rgba(255,255,255,0.3); | ||
+ | } | ||
+ | #p-logo,#search-controls | ||
+ | { | ||
+ | display:none; | ||
+ | } | ||
+ | #top | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | h1.firstHeading | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #footer-box | ||
+ | { | ||
+ | margin-top:1400px; | ||
+ | border: none; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #catlinks | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
/*框架*/ | /*框架*/ | ||
- | body{ font-family:"helvetica"; margin:0; | + | body{ font-family:"helvetica"; margin:0;background-color:transparent; } |
- | #main_container{ background:#FFF; width:100%;height:100%; } | + | #main_container{ background:#FFF; width:100%;height:100%;margin-top:-45px; } |
#container{width:1024px;margin:auto; position:relative; z-index:2; height:1400px; | #container{width:1024px;margin:auto; position:relative; z-index:2; height:1400px; | ||
} | } | ||
Line 11: | Line 51: | ||
height:255px; | height:255px; | ||
text-align:center; | text-align:center; | ||
- | background:url(../ | + | background:url(https://static.igem.org/mediawiki/2014/f/f7/BIT_header.png); |
margin:auto; | margin:auto; | ||
position:relative; | position:relative; | ||
Line 17: | Line 57: | ||
} | } | ||
+ | .image a{color:#000000;} | ||
/*内容*/ | /*内容*/ | ||
- | #content{height:420px; | + | #main_content,#content{height:420px; |
width:1024px; | width:1024px; | ||
margin:auto; | margin:auto; | ||
background:#FFF; | background:#FFF; | ||
- | + | padding:0px; | |
+ | background:#FFF; | ||
+ | border:none; | ||
+ | z-index:0; | ||
position:relative; | position:relative; | ||
} | } | ||
/*页脚*/ | /*页脚*/ | ||
- | # | + | #footer1 ul{ margin:25px 20px 0 0;} |
- | # | + | #footer1 li.style{ width:40px;} |
- | # | + | #footer1 li{ |
list-style:none; | list-style:none; | ||
float:right; | float:right; | ||
Line 37: | Line 81: | ||
padding:0; | padding:0; | ||
width:90px; } | width:90px; } | ||
- | # | + | #others{text-align:center; |
+ | margin:auto 0; | ||
+ | width:1024px; | ||
+ | height:130px; | ||
+ | margin-top:650px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #address p{ text-align:center; line-height:15px;} | ||
+ | |||
+ | #footer1{ | ||
width:1024px; | width:1024px; | ||
position:relative; | position:relative; | ||
Line 60: | Line 113: | ||
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");} | @font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /*返回顶部*/ | |
- | + | #toTop{ | |
- | + | width:50px; | |
- | + | position:fixed; | |
- | + | right:10px; | |
- | + | bottom:10px; | |
- | + | cursor:pointer; | |
+ | display:none; | ||
+ | z-index:10; | ||
+ | } | ||
+ | /*左侧收缩菜单*/ | ||
+ | .float-right{ | ||
+ | float: right; | ||
} | } | ||
- | + | .fa{ | |
- | . | + | font-size: .8em; |
- | + | line-height: 22px !important; | |
- | + | ||
} | } | ||
- | + | dropdown{ | |
- | + | display: inline-block; | |
- | + | ||
- | + | ||
} | } | ||
- | + | dropdown label{ | |
- | + | display: block; | |
- | + | width: 200px; | |
- | + | background: #ECF0F1; | |
- | + | padding: 10px; | |
+ | color: #35a5ca; | ||
+ | border-left: 4px solid #35a5ca; | ||
+ | |||
+ | position: relative; | ||
+ | z-index: 2; | ||
} | } | ||
- | + | dropdown ul li{ background:url(https://static.igem.org/mediawiki/2014/6/69/BIT_dropdown1.png); width: 206px; height:15px; margin-top:10px;} | |
- | + | dropdown ul li a{ line-height: 12px;color:#000;} | |
- | + | ||
- | + | dropdown ul li a:hover{ color: #35a5ca; cursor: pointer;} | |
- | + | dropdown ul li a:visited{ color:#999999; } | |
- | + | ||
+ | dropdown label img{ | ||
+ | background: url(../img/BIT_show.png); | ||
} | } | ||
- | + | dropdown input{ | |
- | + | display: none; | |
- | + | ||
- | + | ||
} | } | ||
- | + | dropdown input ~ ul{ | |
- | + | position: relative; | |
- | + | visibility: hidden; | |
+ | opacity: 0; | ||
+ | top: -20px; | ||
+ | z-index: 1; | ||
} | } | ||
- | + | dropdown input:checked + label{ | |
- | + | background: url(https://static.igem.org/mediawiki/2014/e/e7/BIT_label.png); | |
- | + | color: white; | |
+ | text-align: left; | ||
} | } | ||
- | |||
- | + | dropdown input:checked ~ ul{ | |
- | + | visibility: visible; | |
- | + | opacity: 1; | |
- | + | top: 0; | |
- | + | ||
- | + | ||
} | } | ||
- | + | $colors: #35a5ca, #35a5ca, #35a5ca; | |
- | + | ||
- | + | @for $i from 1 through length($colors) { | |
- | } | + | dropdown ul li:nth-child(#{$i}) { |
- | + | border-left: 4px solid nth($colors, $i); | |
- | + | .fa{ | |
- | + | color: nth($colors, $i); | |
- | + | } | |
- | . | + | &:hover { |
- | + | background: nth($colors, $i); | |
- | + | color: white; | |
+ | .fa{ | ||
+ | color: white; | ||
+ | } | ||
+ | } | ||
+ | } | ||
} | } | ||
- | + | .animate{ | |
- | + | margin:10px 0 0 0; | |
- | + | list-style:none; | |
- | + | text-align:center; | |
- | + | -webkit-transition: all .30s; | |
- | + | -moz-transition: all .30s; | |
- | + | -ms-transition: all .30s; | |
- | + | -ms-transition: all .30s; | |
- | + | transition: all .30s; | |
+ | backface-visibility:hidden; | ||
+ | -webkit-backface-visibility:hidden; /* Chrome and Safari */ | ||
+ | -moz-backface-visibility:hidden; /* Firefox */ | ||
+ | -ms-backface-visibility:hidden; /* Internet Explorer */ | ||
+ | } |
Latest revision as of 16:58, 17 October 2014
@charset "utf-8"; /* CSS Document */
- globalWrapper
{
background-color:transparent; border:none;
}
- top-section{border:none;height: 20px;}
- menubar a{ color:#000;}
- menubar a:hover{ color:#35a5ca;}
- menubar a:visited{ color:#999999;}
.right-menu li a { background:none;text-decoration: none;} .left-menu:hover {
background:rgba(255,255,255,0.3);
}
- p-logo,#search-controls
{
display:none;
}
- top
{
display: none;
} h1.firstHeading {
display: none;
}
- footer-box
{ margin-top:1400px; border: none;
}
- catlinks
{
display: none;
}
/*框架*/ body{ font-family:"helvetica"; margin:0;background-color:transparent; }
- main_container{ background:#FFF; width:100%;height:100%;margin-top:-45px; }
- container{width:1024px;margin:auto; position:relative; z-index:2; height:1400px;
}
- header{width:1024px;
height:255px;
text-align:center; background:url(); margin:auto; position:relative;
}
.image a{color:#000000;}
/*内容*/
- main_content,#content{height:420px;
width:1024px;
margin:auto; background:#FFF; padding:0px;
background:#FFF; border:none; z-index:0;
position:relative; }
/*页脚*/
- footer1 ul{ margin:25px 20px 0 0;}
- footer1 li.style{ width:40px;}
- footer1 li{
list-style:none; float:right; box-shadow:none; border-radius:0; margin:0; padding:0; width:90px; }
- others{text-align:center;
margin:auto 0; width:1024px; height:130px; margin-top:650px; position: relative; }
- address p{ text-align:center; line-height:15px;}
- footer1{
width:1024px; position:relative; margin:auto; margin-top:0; background-color:#FFF; color:#000; height:140px; font-size:12px;
}
- table1{ width:500px; position:absolute; table-layout:fixed;
left:130px; height:100px}
td{width: 170px; padding:10px 10px 0 10px; word-wrap:break-word; }
- table1 img{ width:20px; height:20px;vertical-align:text-bottom; margin-right:10px; }
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}
/*返回顶部*/
- toTop{
width:50px; position:fixed; right:10px; bottom:10px; cursor:pointer; display:none; z-index:10; } /*左侧收缩菜单*/ .float-right{
float: right;
} .fa{
font-size: .8em; line-height: 22px !important;
} dropdown{
display: inline-block;
} dropdown label{
display: block; width: 200px; background: #ECF0F1; padding: 10px; color: #35a5ca; border-left: 4px solid #35a5ca; position: relative; z-index: 2;
} dropdown ul li{ background:url(); width: 206px; height:15px; margin-top:10px;} dropdown ul li a{ line-height: 12px;color:#000;}
dropdown ul li a:hover{ color: #35a5ca; cursor: pointer;} dropdown ul li a:visited{ color:#999999; }
dropdown label img{
background: url(../img/BIT_show.png);
} dropdown input{
display: none;
} dropdown input ~ ul{
position: relative; visibility: hidden; opacity: 0; top: -20px; z-index: 1;
} dropdown input:checked + label{
background: url(); color: white; text-align: left;
}
dropdown input:checked ~ ul{
visibility: visible; opacity: 1; top: 0;
} $colors: #35a5ca, #35a5ca, #35a5ca;
@for $i from 1 through length($colors) {
dropdown ul li:nth-child(#{$i}) { border-left: 4px solid nth($colors, $i); .fa{ color: nth($colors, $i); } &:hover { background: nth($colors, $i); color: white; .fa{ color: white; } } }
}
.animate{ margin:10px 0 0 0; list-style:none; text-align:center;
-webkit-transition: all .30s; -moz-transition: all .30s; -ms-transition: all .30s; -ms-transition: all .30s; transition: all .30s; backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */
}