|
|
Line 20: |
Line 20: |
| #top-section #p-logo, | | #top-section #p-logo, |
| #top-section #search-controls, | | #top-section #search-controls, |
- | #content h1.firstHeading, | + | #content h1.firstHeading,#footer-box, |
| #content #bodyContent #contentSub, | | #content #bodyContent #contentSub, |
| #content #bodyContent p, /* holly crap, they have p element for script tag and no id and no class... */ | | #content #bodyContent p, /* holly crap, they have p element for script tag and no id and no class... */ |
Line 34: |
Line 34: |
| width: auto; | | width: auto; |
| } | | } |
- |
| |
- | #footer-box {
| |
- | border-top: 1px solid #E4E4E4;
| |
- | border-right: 0px;
| |
- | border-bottom: 0px;
| |
- | border-left: 0px;
| |
- | }
| |
- |
| |
- | /* because I hide p element in #bodyContent */
| |
| #content #bodyContent div p{ | | #content #bodyContent div p{ |
| display: block; | | display: block; |
- | }
| |
- | body{
| |
- | font-size:14px;
| |
- | font-family:Tahoma,Helvetica,Simsun,STHeiti,
| |
- | Georgia,"Lucida Grande", Verdana, Lucida,Arial, Helvetica, 宋体,sans-serif;
| |
- | cursor:default;
| |
- | background: #e7e9e6;
| |
- | position: relative;
| |
| } | | } |
| </style> | | </style> |
- | <html>
| |
| <style> | | <style> |
- | @charset "utf-8";
| |
- | /* CSS Document */
| |
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input { | | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input { |
| margin:0px; | | margin:0px; |
Line 95: |
Line 75: |
| -ms-transition-property:color; | | -ms-transition-property:color; |
| -ms-transition-timing-function:ease-out; | | -ms-transition-timing-function:ease-out; |
- | }
| |
- | a:link{
| |
- | text-decoration:none;
| |
- | font-weight:bold;
| |
- | color:#3355DD;
| |
- | }
| |
- | a:active{
| |
- | font-weight:bold;
| |
- | text-decoration:none;
| |
- | color:#545678;
| |
- | }
| |
- | a:hover {
| |
- | font-weight:bold;
| |
- | text-decoration:underline;
| |
- | color:#f60;
| |
- | }
| |
- | a:visited{
| |
- | text-decoration:none;
| |
- | font-weight:bold;
| |
| } | | } |
| .standout{ | | .standout{ |
| box-shadow: 0 0 1em 1em #ccceee; | | box-shadow: 0 0 1em 1em #ccceee; |
| } | | } |
- | .iteric{}
| |
| .header{ | | .header{ |
| padding: 55px 0 10px; | | padding: 55px 0 10px; |
Line 235: |
Line 195: |
| bottom: 270px; | | bottom: 270px; |
| } | | } |
- |
| |
- |
| |
- |
| |
- |
| |
| | | |
| | | |
Line 362: |
Line 318: |
| } | | } |
| | | |
- |
| |
- |
| |
- |
| |
- | /*The whole container style!*/
| |
- | #container{
| |
- | width:100%;
| |
- | height:auto;
| |
- | position:relative;
| |
- | background:#e4e3e2;
| |
- | float:left;
| |
- | outline:0 none;
| |
- | vertical-align:baseline;
| |
- | padding-top:222px;
| |
- | _padding-top:230px;
| |
- | *+padding-top:230px;
| |
- |
| |
- | /*background:url("../images/bg.jpg") repeat scroll 0 0 transparent;*/
| |
- | }
| |
- |
| |
- | #header{
| |
- | height:80px;
| |
- | width:100%;
| |
- | position:fixed;
| |
- | top:0px;
| |
- | z-index:100;
| |
- | overflow:hidden;
| |
- | float:left;
| |
- | opacity:0.7;
| |
- | filter:alpha(opacity:70);
| |
- | -webkit-transition:all 0.4s ease-in 0s;
| |
- | -moz-transition:all 0.4s ease-in 0s;
| |
- | -o-transition:all 0.4s ease-in 0s;
| |
- | text-align:center;
| |
- | background:url(../images/IGEM.png) repeat-x scroll 0 0 ;
| |
- | background:#06103A;
| |
- | }
| |
- | #title{
| |
- | width:1032px;
| |
- | margin:0px auto;
| |
- | height:60px;
| |
- | font-size:60px;
| |
- | line-height:60px;
| |
- | margin-top:10px;
| |
- | font-weight:bold;
| |
- | color:#ffffff;
| |
- | -webkit-transition:all 0.4s ease-in-out 0s;
| |
- | -moz-transition:all 0.4s ease-in-out 0s;
| |
- | -o-transition:all 0.4s ease-in-out 0s;
| |
- | }
| |
- |
| |
- | #main{
| |
- | width:100%;
| |
- | position:relative;
| |
- | }
| |
- | #nav{
| |
- | *height:108px;
| |
- | _height:108px;
| |
- | height:140px;
| |
- | width:100%;
| |
- | background:#B5DBDC;
| |
- | position:fixed;
| |
- | overflow:hidden;
| |
- | text-align:center;
| |
- | z-index:60;
| |
- | top:80px;
| |
- | left:0px;
| |
- | border:1px solid #ffffff;
| |
- | -moz-transition-property:height,top;
| |
- | -moz-transition-duration:0.3s;
| |
- | -webkit-transition-property:height,top;
| |
- | -webkit-transition-duration:0.3s;
| |
- | }
| |
- | #nav .nav{
| |
- | width:1032px;
| |
- | height:auto;
| |
- | margin:0px auto;
| |
- | position:reltive;
| |
- | }
| |
- | #nav ul{
| |
- | list-style:none outside none;
| |
- |
| |
- | }
| |
- | #nav ul .nav_li{
| |
- | float:left;
| |
- | width:170px;
| |
- | display:block;
| |
- | height:140px;
| |
- | overflow:hidden;
| |
- | border:1px solid #ffffff;
| |
- | border-width:0px 1px 0px 0px;
| |
- | -moz-transition-property:all;
| |
- | -moz-transition-duration:0.4s;
| |
- | -webkit-transition-property:all;
| |
- | -webkit-transition-duration:0.4s;
| |
- | }
| |
- | #nav ul .nav_li a{
| |
- | color:#16242E;
| |
- | display:inline-block;
| |
- | font-size:24px;
| |
- | font-weight:bold;
| |
- | width:160px;
| |
- | line-height:24px;
| |
- | padding:110px 5px 5px 5px;
| |
- | text-shadow:2px 2px 8px;
| |
- | }
| |
- | #nav_li1{
| |
- | background:url(../images/home.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- | #nav_li2{
| |
- | background:url(../images/Projects.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- | #nav_li3{
| |
- | background:url(../images/model.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- | #nav_li4{
| |
- | background:url(../images/achieve.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- | #nav_li5{
| |
- | background:url(../images/human.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- | #nav_li6{
| |
- | background:url(../images/safty.png) no-repeat 20px -6px scroll transparent;
| |
- | }
| |
- |
| |
- |
| |
- | /*主体内容部分*/
| |
- | #content{
| |
- | background:#678889;
| |
- | width:960px;
| |
- | margin:8px auto;
| |
- | height:50em;
| |
- | color:#ffffff;
| |
- | z-index:10;
| |
- | position:relative;
| |
- | overflow:hidden;
| |
- | }
| |
- |
| |
- | #footer{
| |
- | background:#2B3255;
| |
- | height:200px;
| |
- | padding:30px 0px 5px;
| |
- | text-align:center;
| |
- | font-family:"微软雅黑";
| |
- | color:#d5d5d5;
| |
- | z-index:10;
| |
- | background:url(../images/endbg.gif) repeat-x scroll 0 0 #fffff;
| |
- | }
| |
- | #footer a{
| |
- | color:#B38034;
| |
- | font-weight:bold;
| |
- | text-decoration:none;
| |
- | }
| |
- | #footer a:hover{
| |
- | color:#CCCC32;
| |
- | font-weight:bold;
| |
- | text-decoration:none;
| |
- | }
| |
- |
| |
- |
| |
- | .clearfix:before,.clearfix:after{
| |
- | content:"";
| |
- | display:block;
| |
- | height:0;
| |
- | width:0;
| |
- | visibility:hidden;
| |
- | overflow:hidden;
| |
- | }
| |
- | .menu_hover{
| |
- | background-position:20px -1px;
| |
- | }
| |
| </style> | | </style> |
| <!--bootstrap.min.css--> | | <!--bootstrap.min.css--> |