Team:NEAU-Harbin/css/style.css

From 2014.igem.org

(Difference between revisions)
 
(One intermediate revision not shown)
Line 1: Line 1:
-
 
+
<nonwiki>
.clear{ clear:both; height:0; overflow:hidden;}
.clear{ clear:both; height:0; overflow:hidden;}
ul{ list-style:none;}
ul{ list-style:none;}
Line 42: Line 42:
}
}
/**************nav start**************/
/**************nav start**************/
-
#siteNav {
+
siteNav {
width: 100%;
width: 100%;
position: fixed;
position: fixed;
Line 370: Line 370:
margin-right: auto;
margin-right: auto;
-
 
+
</nonwiki>
/**************contact end**************/
/**************contact end**************/

Latest revision as of 03:25, 16 October 2014

<nonwiki> .clear{ clear:both; height:0; overflow:hidden;} ul{ list-style:none;}

p{text-align:justify;}


body { font-size:14px; line-height:24px;

font-family: Verdana, Arial, "Microsoft YaHei", "SimHei", sans-serif; color: #222; min-width: 1000px; } a, a:link, a:visited{ color:#000; text-decoration:underline; } a:hover{ color:#ff4500; text-decoration:underline; } h1 { margin: 0 0 1em; width: 100%; font-size: 48px;

font-weight: bold; text-transform: uppercase; text-align: center; -webkit-font-smoothing: antialiased; font-family: Gotham, "Helvetica Neue", "Microsoft YaHei", "SimHei", sans-serif; } .h0Div { height: 0; clear: both; overflow: hidden; } .hide{ display:none; } /**************nav start**************/ siteNav { width: 100%; position: fixed; top: 20px; left: 0; z-index: 1000; height: 50px; background: #333;

/* left:30%;*/ margin:0 auto; background:url(../images/nav_bg.jpg) repeat-x;


}

  1. siteNav ul {

margin: 0; padding: 0; }

  1. siteNav ul .menu {

/*-webkit-font-smoothing:antialiased;*/ margin: 0; padding: 0; display: block; height: 50px; overflow: hidden; position: absolute; top: 0; /*box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;*/ perspective: 1000px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; }

  1. siteNav ul .menu>div {

position: absolute; height: 53px; pointer-events: none; width: 100%; /*padding-left: 20px;*/ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; transform-origin: 50% 50% -25px; -webkit-transform-origin: 50% 50% -25px; -moz-transform-origin: 50% 50% -25px; -ms-transform-origin: 50% 50% -25px; }

  1. siteNav ul .menu .sta1 {

transform: rotateX(90deg); -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); }

  1. siteNav ul .menu .sta2 {

transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); }

  1. siteNav ul .menu div h1 {

font-family: Verdana, Arial, "Microsoft YaHei", "SimHei", sans-serif; font-size: 14px; font-smooth:always; letter-spacing:1px; line-height: 18px; display: block; height: 18px; clear: both; text-align:left; text-transform:uppercase; margin:11px 0 0 0; }

  1. siteNav ul .menu .sta1 h1 {

color:#222; }

  1. siteNav ul .menu .sta2 h1 {

color:#999; } /*#siteNav ul .menu div span { display: block; width: 14px; height: 3px; margin-top: 4px; }

  1. siteNav ul .menu div span {

background-color: #999; } siteNav ul .current div span { background-color: #ff4500; }

    • /
  2. siteNav ul .menu:hover{cursor:pointer}
  3. siteNav ul .menu:hover>div{transition:all .15s ease;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-ms-transition:all .15s ease}
  4. siteNav ul .menu:hover .sta1{transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg)}
  5. siteNav ul .menu:hover .sta2{transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg)}
  1. siteNav ul .current:hover{cursor:default}
  2. siteNav ul .current .sta1, #siteNav ul .current:hover .sta1{color:#fff;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg)}
  3. siteNav ul .current .sta2, #siteNav ul .current:hover .sta2{color:#000;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg)}

/**************nav end**************/

/**************home start**************/ .home { width: 100%; overflow: hidden; position: relative; margin-top:-4%; } .home .navArrow { width: 100%; height: 50px; position: absolute; top: 50%; z-index: 10; } .home .navArrow .arrow { width: 50px; height: 50px; cursor: pointer; } .home .navArrow .arrow.left { float: left; background: url(../images/arrowLeft.png) center center no-repeat; margin-left: 33px; -webkit-animation: hero-left 1s 3; -moz-animation: hero-left 1s 3; -ms-animation: hero-left 1s 3; -o-animation: hero-left 1s 3; animation: hero-left 1s 3; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } .home .navArrow .arrow.right { float: right; background: url(../images/arrowRight.png) center center no-repeat; margin-right: 33px; -webkit-animation: hero-right 1s 3; -moz-animation: hero-right 1s 3; -ms-animation: hero-right 1s 3; -o-animation: hero-right 1s 3; animation: hero-right 1s 3; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } .home .slideWrap { position: relative; overflow: hidden; } .home .slideWrap .slideUnit { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; z-index: 0; -webkit-backface-visibility: hidden; text-align: center; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .home .slideWrap .slideUnit .text { position: static; color: #fff; margin: auto; max-width: 960px; text-align: center; width: 100%; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .home .slideWrap .slideUnit .text .logo { margin: auto; margin-top:-8%; margin-bottom: 0; max-width: 600px; height: 600px; background-image: url(../images/main_tu.jpg); background-size: cover!important; background-repeat: no-repeat; background-position: center; -ms-behavior: url(backgroundsize.htc);

}

.tan{ position: static; color: #fff; margin: auto; max-width: 800px; text-align: center; width: 100%; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none;

} 

.lianjie {width:100%;max-width:300px;  margin:auto;}
.lianjie li{ float:left; height:52px; margin-right:30px;}

.button{ width:100%; max-width:970px; text-align: center;margin:0 auto; padding-top:5%; clear:both;}

.button .tc{ float:left; width:29%} /**************home end**************/ /**************about start**************/ .about{ width:100%; position:relative; overflow:hidden; background:#17aedf; } .about .content{ margin-top:8% !important;}

.about .content .team_img{ max-width:781px; height:201px;margin:0 auto;} .about .content .tan { max-width:970px; margin:0 auto; }

/**************about end**************/ /**************work start**************/ .work{ width:100%; position:relative; overflow:hidden; background:#e1e3e2; /*height:903px;*/

} .work .content{ overflow:hidden; margin:0 auto; 

   margin-top:3% !important;

max-width:960px; } .work .content #images{ width:1349px; margin:0 auto;} .work .content #images img{ float:left;} /**************work end**************/ /**************clients start**************/ .clients{ width:100%; position:relative; overflow:hidden; 

   background:#9b59b6;

} .clients .content{ max-width:960px; position:relative; overflow:hidden; margin:0 auto; margin-top:7% !important; } .clients .content .team_img{ max-width:348px; height:96px; margin:0 auto;} .clients_nr h2{ color:#e4e6e3; margin-top:3%;} /**************clients end**************/

/**************careers start**************/ .careers{ width:100%; position:relative; overflow:hidden; background:#1abc9c;


} .careers .content{ max-width:960px; overflow:hidden; margin:0 auto; 

   margin-top:7% !important;

} .careers .content .team_img{max-width:348px; height:107px; margin:0 auto;} .careers .content .tan{max-width:960px; margin:0 auto;} .careers_nr h2{ color:#e4e6e3; margin-top:2%;} /**************careers end**************/ /**************contact start**************/ .contact{ width:100%; position:relative; overflow:hidden; background:url(../images/shu.jpg) no-repeat left bottom; background-color:#e4e6e5; }

  1. seaContainer {

width: 100%; height: 180px; overflow: hidden; position:absolute; bottom:0; z-index:10; } .contact .content{ width:900px; margin:0 auto; }

.careers .content .contact_tan{width:900px; margin:0 auto;}

  1. groupparts {

text-align: center; margin-left: auto; margin-right: auto;

</nonwiki> /**************contact end**************/

Retrieved from "http://2014.igem.org/Team:NEAU-Harbin/css/style.css"