Team:BIT-China/all.css
From 2014.igem.org
(21 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
@charset "utf-8"; | @charset "utf-8"; | ||
/* CSS Document */ | /* CSS Document */ | ||
+ | |||
*{ | *{ | ||
padding:0px; | padding:0px; | ||
margin:0px; | margin:0px; | ||
+ | } | ||
+ | #backup{ | ||
+ | position:fixed; | ||
+ | cursor:pointer; | ||
+ | bottom:195px; | ||
+ | right:150px; | ||
+ | width:40px; | ||
+ | height:40px; | ||
+ | } | ||
+ | #nav2{ | ||
+ | position:relative; | ||
+ | |||
+ | left:420px; | ||
+ | top:2px; | ||
+ | width:125px; | ||
+ | height:125px; | ||
+ | border-radius:90px; | ||
} | } | ||
body{ | body{ | ||
background-color:#338FC4; | background-color:#338FC4; | ||
- | + | background-image:url(https://static.igem.org/mediawiki/2014/f/f1/BIT-CHINA_smalldiwen.png); | |
+ | |||
} | } | ||
#maincontent{ | #maincontent{ | ||
position:absolute; | position:absolute; | ||
+ | top:0px; | ||
left:203px; | left:203px; | ||
width:960px; | width:960px; | ||
Line 17: | Line 37: | ||
} | } | ||
#header{ | #header{ | ||
+ | position:absolute; | ||
+ | z-index:9999999; | ||
+ | top:0px; | ||
+ | left:0px; | ||
width:960px; | width:960px; | ||
height:105px; | height:105px; | ||
Line 22: | Line 46: | ||
background-image:url(https://static.igem.org/mediawiki/2014/2/20/BIT-CHINA_Header-TopBG1.png); | background-image:url(https://static.igem.org/mediawiki/2014/2/20/BIT-CHINA_Header-TopBG1.png); | ||
} | } | ||
- | + | .daohang{ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position:absolute; | position:absolute; | ||
- | z-index:- | + | z-index:9999999; |
+ | top:105px; | ||
+ | left:0px; | ||
+ | width:960px; | ||
+ | height:150px; | ||
+ | background:url(https://static.igem.org/mediawiki/2014/f/f7/BIT-CHINA_Header-TopBG2.png) no-repeat; | ||
+ | border:0px #00CC00 solid; | ||
+ | z-index:999; | ||
} | } | ||
#content0{ | #content0{ | ||
+ | position:absolute; | ||
+ | left:0px; | ||
+ | top:0px; | ||
width:950px; | width:950px; | ||
border-left:5px #74BBE3 solid; | border-left:5px #74BBE3 solid; | ||
border-right:5px #74BBE3 solid; | border-right:5px #74BBE3 solid; | ||
+ | padding-top:100px; | ||
z-index:-10; | z-index:-10; | ||
} | } | ||
#content1{ | #content1{ | ||
width:99.4%; | width:99.4%; | ||
- | |||
padding-bottom:20px; | padding-bottom:20px; | ||
+ | padding-top:150px; | ||
min-height:1200px; | min-height:1200px; | ||
background:rgba(116,187,227,1); | background:rgba(116,187,227,1); | ||
margin:0 auto; | margin:0 auto; | ||
z-index:-10; | z-index:-10; | ||
+ | } | ||
+ | .essay_title2{ | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | font-family:Times New Roman, Helvetica, sans-serif; | ||
+ | padding:0px 0px; | ||
+ | height:60px; | ||
+ | line-height:60px; | ||
+ | abackground-color:#F3F3F3; | ||
+ | margin:30px auto 10px auto; | ||
} | } | ||
.essay_pic{ | .essay_pic{ | ||
width:400px; | width:400px; | ||
+ | } | ||
+ | .essay_pic2{ | ||
+ | width:400px; | ||
+ | margin:10px; | ||
} | } | ||
.essay{ | .essay{ | ||
Line 59: | Line 104: | ||
font-size:45px; | font-size:45px; | ||
font-weight:bold; | font-weight:bold; | ||
- | font-family: | + | font-family:Times New Roman, Helvetica, sans-serif; |
padding:0px 20px; | padding:0px 20px; | ||
height:70px; | height:70px; | ||
line-height:70px; | line-height:70px; | ||
- | wbackground-image:url( | + | wbackground-image:url(img/bgg.png); |
border-bottom:1px #CCCCCC solid; | border-bottom:1px #CCCCCC solid; | ||
z-index:-10000; | z-index:-10000; | ||
Line 72: | Line 117: | ||
abackground-color:#6CF; | abackground-color:#6CF; | ||
font-size:21px; | font-size:21px; | ||
- | font-family: | + | font-family:Helvetica; |
padding:20px 30px 50px 30px; | padding:20px 30px 50px 30px; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
#nav{ | #nav{ | ||
- | width: | + | width:400px; |
+ | height:50px; | ||
abackground-color:rgba(51,51,51,0.3); | abackground-color:rgba(51,51,51,0.3); | ||
- | position: | + | position:absolute; |
- | top: | + | z-index:9999999; |
- | left: | + | top:43px; |
- | + | left:0px; | |
+ | margin:0px; | ||
+ | padding:0px; | ||
} | } | ||
#nav ul{ | #nav ul{ | ||
- | + | position:absolute; | |
+ | padding:0px; | ||
+ | margin:0px; | ||
+ | top:0px; | ||
+ | left:27px; | ||
+ | margin:0px; | ||
+ | abackground-color:#6F0; | ||
height:40px; | height:40px; | ||
list-style:none; | list-style:none; | ||
Line 111: | Line 152: | ||
position:relative; | position:relative; | ||
top:0px; | top:0px; | ||
+ | left:0px; | ||
-webkit-transition:all 0.2s linear; | -webkit-transition:all 0.2s linear; | ||
-ms-transition:all 0.2s linear; | -ms-transition:all 0.2s linear; | ||
Line 120: | Line 162: | ||
cursor:pointer; | cursor:pointer; | ||
top:50px; | top:50px; | ||
+ | left:0px; | ||
} | } | ||
#nav1{ | #nav1{ | ||
- | width: | + | width:400px; |
+ | height:50px; | ||
+ | aborder:3px #00FF00 solid; | ||
abackground-color:rgba(51,51,51,0.3); | abackground-color:rgba(51,51,51,0.3); | ||
- | position: | + | position:absolute; |
- | + | z-index:9999999; | |
- | + | padding:0px; | |
- | + | margin:0px; | |
+ | top:42px; | ||
+ | left:592px; | ||
} | } | ||
#nav1 ul{ | #nav1 ul{ | ||
- | + | position:absolute; | |
+ | top:0px; | ||
+ | left:0px; | ||
height:40px; | height:40px; | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
list-style:none; | list-style:none; | ||
} | } | ||
Line 141: | Line 192: | ||
float:left; | float:left; | ||
position:relative; | position:relative; | ||
- | top: | + | top:0px; |
+ | left:0px; | ||
-webkit-transition:all 0.2s linear; | -webkit-transition:all 0.2s linear; | ||
-ms-transition:all 0.2s linear; | -ms-transition:all 0.2s linear; | ||
Line 150: | Line 202: | ||
#nav1 ul li:hover { | #nav1 ul li:hover { | ||
cursor:pointer; | cursor:pointer; | ||
- | top: | + | top:50px; |
+ | left:0px; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
#left{ | #left{ | ||
position:absolute; | position:absolute; | ||
- | |||
left:-55px; | left:-55px; | ||
top:280px; | top:280px; | ||
Line 170: | Line 216: | ||
border:0px #00FF00 solid; | border:0px #00FF00 solid; | ||
position:relative; | position:relative; | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
left:0px; | left:0px; | ||
} | } | ||
Line 190: | Line 238: | ||
left:0px; | left:0px; | ||
text-decoration:none; | text-decoration:none; | ||
+ | |||
display:block; | display:block; | ||
color:#003b66; | color:#003b66; | ||
Line 224: | Line 273: | ||
opacity:1; | opacity:1; | ||
left:-130px; | left:-130px; | ||
+ | } | ||
+ | #footer{ | ||
+ | width:960px; | ||
+ | height:71px; | ||
+ | position:absolute; | ||
+ | bottom:0px; | ||
+ | left:0px; | ||
+ | background:url(https://static.igem.org/mediawiki/2014/3/3c/BIT-CHINA_Footer.png) no-repeat; | ||
} | } |
Latest revision as of 03:53, 18 October 2014
@charset "utf-8"; /* CSS Document */
- {
padding:0px; margin:0px; }
- backup{
position:fixed; cursor:pointer; bottom:195px; right:150px; width:40px; height:40px; }
- nav2{
position:relative;
left:420px; top:2px; width:125px; height:125px; border-radius:90px; } body{ background-color:#338FC4; background-image:url();
}
- maincontent{
position:absolute; top:0px; left:203px; width:960px; border:0px #00FF00 solid; }
- header{
position:absolute; z-index:9999999; top:0px; left:0px; width:960px; height:105px; border:0px #003300 solid; background-image:url(); } .daohang{ position:absolute; z-index:9999999; top:105px; left:0px; width:960px; height:150px; background:url() no-repeat; border:0px #00CC00 solid; z-index:999; }
- content0{
position:absolute; left:0px; top:0px; width:950px; border-left:5px #74BBE3 solid; border-right:5px #74BBE3 solid; padding-top:100px; z-index:-10; }
- content1{
width:99.4%; padding-bottom:20px; padding-top:150px; min-height:1200px; background:rgba(116,187,227,1); margin:0 auto; z-index:-10; } .essay_title2{ font-size:30px; font-weight:bold; font-family:Times New Roman, Helvetica, sans-serif; padding:0px 0px; height:60px; line-height:60px; abackground-color:#F3F3F3; margin:30px auto 10px auto; } .essay_pic{ width:400px; } .essay_pic2{ width:400px; margin:10px; } .essay{ width:90%; background-color:rgba(255,255,255,0.7); border-radius:40px; aborder-bottom:1px #CCCCCC solid; margin:0 auto;; padding:0px; } .essay_title{ font-size:45px; font-weight:bold; font-family:Times New Roman, Helvetica, sans-serif; padding:0px 20px; height:70px; line-height:70px; wbackground-image:url(img/bgg.png); border-bottom:1px #CCCCCC solid; z-index:-10000; opacity:0.8; margin:30px auto 10px auto; } .essay_content{ abackground-color:#6CF; font-size:21px; font-family:Helvetica; padding:20px 30px 50px 30px;
}
- nav{
width:400px; height:50px; abackground-color:rgba(51,51,51,0.3); position:absolute; z-index:9999999; top:43px; left:0px; margin:0px; padding:0px; }
- nav ul{
position:absolute; padding:0px; margin:0px; top:0px; left:27px; margin:0px; abackground-color:#6F0; height:40px; list-style:none; }
- nav li{
width:40px; height:80px; margin:0 22px; abackground-color:rgba(0,0,0,0.1); float:left; position:relative; top:0px; left:0px; -webkit-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; }
- nav ul li:hover {
cursor:pointer; top:50px; left:0px; }
- nav1{
width:400px; height:50px; aborder:3px #00FF00 solid; abackground-color:rgba(51,51,51,0.3); position:absolute; z-index:9999999; padding:0px; margin:0px; top:42px; left:592px; }
- nav1 ul{
position:absolute; top:0px; left:0px; height:40px; padding:0px; margin:0px; list-style:none; }
- nav1 li{
width:40px; height:80px; margin:0 22px; abackground-color:rgba(0,0,0,0.1); float:left; position:relative; top:0px; left:0px; -webkit-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; }
- nav1 ul li:hover {
cursor:pointer; top:50px; left:0px; }
- left{
position:absolute; left:-55px; top:280px; z-index:100000; } .sidenav{ list-style:none; border:0px #00FF00 solid; position:relative; padding:0px; margin:0px; left:0px; } .sidenav li{ width:180px; height:50px; line-height:50px; border:0px #999999 dashed; position:relative; left:0px; -webkit-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear;
} .sidenav a{ position:relative; left:0px; text-decoration:none;
display:block; color:#003b66; font-size:18px; font-family:Impact; text-align:left; -webkit-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .sidenav a:first-letter{ acolor:rgba(0,59,102,0.8); line-height:50px; font-size:25px; text-align:center; padding:0px 0px 0px 11px; margin-right:6px; letter-spacing:11px; border:5px #003b66 solid; border-radius:90px; background-color:rgba(255,255,255,0.8); } .sidenav span:not(hover){ opacity:0; } .sidenav li:hover span{ opacity:1; } .sidenav li:hover{ background-color:rgba(255,255,255,0.5); border-radius:90px; opacity:1; left:-130px; }
- footer{
width:960px; height:71px; position:absolute; bottom:0px; left:0px; background:url() no-repeat; }