Template:USTC-Software/header/css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
#top {
#top {
       position: fixed;
       position: fixed;
-
       background: #1bb6dd;
+
       background-color:#34495e;
       width:100%;
       width:100%;
-
       height:50px;
+
       height:100px;
       z-index: 5000;
       z-index: 5000;
       top:0px;
       top:0px;
       left:0px;
       left:0px;
-
      border-radius: 0 0 5px 5px;
+
  opacity:1;
-
      -moz-border-radius: 0 0 5px 5px;
+
   
-
      -webkit-border-radius: 0 0 15px 15px;
+
}
}
Line 15: Line 14:
#header {
#header {
       position: relative;
       position: relative;
-
       background: #fff;
+
       /*background:url(../images/bg.png) repeat-x;
-
       border-radius: 0 0 5px 5px;
+
  background-color:#34495e;
 +
       border-radius: 0 0 10px 10px;
       -moz-border-radius: 0 0 5px 5px;
       -moz-border-radius: 0 0 5px 5px;
       -webkit-border-radius: 0 0 15px 15px;
       -webkit-border-radius: 0 0 15px 15px;
-
       height: 45px;
+
       height:95px;
       font-family: "Helvetica Neue","Arial",sans-serif;
       font-family: "Helvetica Neue","Arial",sans-serif;
-
      /*border: 5px #1bb6dd solid;*/
+
     
       border-top-width:0px;
       border-top-width:0px;
-
       max-width:960px;
+
       max-width:980px;
-
       width:955px;
+
       width:970px;
       margin-left:-15px;
       margin-left:-15px;
}
}
Line 47: Line 47:
#nav-strip {
#nav-strip {
-
       margin:0;
+
       margin-top:50px;
 +
      margin-left:-25px;
       width: auto;
       width: auto;
-
       height: 45px;
+
       height: 25px;
       position: absolute;
       position: absolute;
       z-index:9999;
       z-index:9999;
-
       left:270px;
+
       left:190px;
}
}
-
#nav-strip a:hover{
+
#nav-strip a:hover { text-decoration:none;}
-
      text-decoration:none;
+
-
}
+
Line 65: Line 64:
       float: left;
       float: left;
       position:relative;
       position:relative;
-
       padding-top:15px;
+
       padding-top:10px;
-
       width:110px;
+
       width:120px;/*主菜单宽 110px*/
-
       height: 30px;
+
       height: 35px;
       text-align:center;
       text-align:center;
}
}
-
#nav-strip ul li.nav-item:hover,#nav-strip ul li.nav-item.hover {  
+
#nav-strip ul li.nav-item:hover,
-
      background: #1bb6dd;
+
#nav-strip ul li.nav-item.hover {  
 +
    background: #fff;
}
}
-
#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a {
+
#nav-strip ul li.nav-item:hover a,  
-
      color: #FFF;
+
#nav-strip ul li.nav-item.hover a {
 +
    color: #000;
}
}
 +
#nav-strip ul li a {
#nav-strip ul li a {
-
         color: #213443;
+
         color:#fff;/*#09c;*/
         display:block;
         display:block;
-
         font-size: 14px;/*主菜单字体大小*/
+
         font-size: 20px;
 +
font-weight:200;
}
}
Line 89: Line 92:
       display: none;
       display: none;
       position:absolute;
       position:absolute;
-
       background: #1bb6dd;
+
       background: #34495e;
       top:45px;
       top:45px;
}
}
-
 
+
#nav-strip ul li .subnav ul li:hover{
-
 
+
background-color:#4d77a1;
 +
}
 +
 
#nav-strip .subnav-inner {
#nav-strip .subnav-inner {
       float: left;
       float: left;
-
       width: 110px;
+
       width: 120px;
}
}
 +
#nav-strip .subnav .subnav-inner ul li.hp{
 +
height:60px;
 +
background-color:#34495e;
 +
}
 +
#nav-strip .subnav .subnav-inner ul .hp:hover{
 +
background:#7599bc;
 +
}
#nav-strip ul li .subnav ul {
#nav-strip ul li .subnav ul {
       float: left;
       float: left;
-
       width: 110px;
+
       width: 120px;
       list-style:none;
       list-style:none;
 +
  height:auto;
}
}
Line 109: Line 122:
#nav-strip ul li .subnav ul li {
#nav-strip ul li .subnav ul li {
       display:block;
       display:block;
-
       border-bottom:1px solid #fff;
+
       border-top:2px outset #34495e;/*1b2d3f;*/
-
      float:left;
+
  float:left;
-
       width: 110px;
+
       width: 120px;/*白线宽120px度*/
}
}
Line 117: Line 130:
#nav-strip ul li .subnav ul li a {
#nav-strip ul li .subnav ul li a {
       font-weight: normal;
       font-weight: normal;
-
       margin-top:5px;
+
       margin-top:12px;
-
       height:20px;
+
       height:32px;
       margin-bottom:2px;
       margin-bottom:2px;
 +
  margin-top:8px;
}
}
Line 131: Line 145:
-
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a {  
+
#nav-strip ul li .subnav ul li a,
-
      white-space: normal;
+
#nav-strip ul li.nav-item:hover .subnav ul li a { white-space: normal;}
-
}
+
-
#nav-strip ul li .subnav ul li.active a,#nav-strip ul li .subnav ul li a:hover {  
+
#nav-strip ul li .subnav ul li.active a,
-
      color:#000!important;
+
#nav-strip ul li .subnav ul li a:hover { color:#000;}
-
}
+
#team_logo {
#team_logo {
-
       width: auto;  
+
       width: 275px;  
-
       height: 15px;  
+
       height: 45px;  
       float: left;
       float: left;
-
       margin-top:12px;
+
       margin-top:5px;
-
       margin-left:5px;
+
       margin-left:-95px;
-
       font-size:36px;
+
       font-size:35px;
       font-family:'Open Sans',"Helvetica Neue",arial,serif;
       font-family:'Open Sans',"Helvetica Neue",arial,serif;
-
      -webkit-transition: all .5s ease-out;
+
 
-
      -moz-transition: all .5s ease-out;
+
 
-
      -o-transition: all .5s ease-out;
+
-
      -ms-transition: all .5s ease-out;
+
-
      transition: all .5s ease-out;
+
}
}
#team_logo a{
#team_logo a{
-
       color:#39af87;
+
       color:#ed7751;
       text-decoration:none;
       text-decoration:none;
-
       text-shadow: 4px 3px 0.5px #f2f1f1;
+
       text-shadow: 4px 3px 0.5px #03C 0.6;
       position:relative;
       position:relative;
-
      -webkit-transition: color .5s ease-out;
+
 
-
      -moz-transition: color .5s ease-out;
+
-
      -o-transition: color .5s ease-out;
+
-
      -ms-transition: color .5s ease-out;
+
-
      transition: color .5s ease-out;
+
}
}
 +
#team_logo a img{
 +
width:220px;
 +
height:134px;
 +
}
#team_logo a:active{
#team_logo a:active{
-
     text-shadow:6px 4px 1px #999;
+
     text-shadow:2px 2px 2px #f1f0f0;
     left:1px;
     left:1px;
     top:1px;
     top:1px;
}
}
-
#team_logo:hover a{  
+
#team_logo:hover a{ color:#439b66;}
-
    color:#1bb6dd;
+
-
}
+
#igem {
#igem {
       float:right;
       float:right;
       margin-top:-1px;
       margin-top:-1px;
-
       margin-right:-25px;
+
       margin-right:-55px;
-
      background: url(https://static.igem.org/mediawiki/2013/7/7c/USTC-Software_circle.png) no-repeat center;
+
       height:83px;  
-
       height:80px;  
+
       width:110px;  
-
       width:160px;  
+
       }
-
       border-bottom-right-radius:1000px;
+
-
      border-bottom-left-radius:1000px;
+
-
      border-top-left-radius:0px;
+
-
      border-top-right-radius:0px;
+
-
}
+
#igem a img{
#igem a img{
         transition:width 1s, height 1s;
         transition:width 1s, height 1s;
         -moz-transition:width 1s, height 1s, -moz-transform 1s;  
         -moz-transition:width 1s, height 1s, -moz-transform 1s;  
         -webkit-transition:width 1s, height 1s, -webkit-transform 1s;  
         -webkit-transition:width 1s, height 1s, -webkit-transform 1s;  
-
         -o-transition:width 1s, height 1s, -o-transform 1s;
+
         -o-transition:width 1s, height 1s, -o-transform 1s;  
         -ms-transition:width 1s, height 1s, -ms-transform 1s;
         -ms-transition:width 1s, height 1s, -ms-transform 1s;
}
}
#igem a img:hover{
#igem a img:hover{
         transform:rotate(360deg);
         transform:rotate(360deg);
-
         -moz-transform:rotate(360deg);  
+
         -moz-transform:rotate(360deg);
-
         -webkit-transform:rotate(360deg);  
+
         -webkit-transform:rotate(360deg);
         -o-transform:rotate(360deg);  
         -o-transform:rotate(360deg);  
         -ms-transition:width 1s, height 1s, -ms-transform 1s;
         -ms-transition:width 1s, height 1s, -ms-transform 1s;
}
}

Revision as of 16:46, 21 September 2013

  1. top { 
      position: fixed;
      background-color:#34495e;
      width:100%;
      height:100px;
      z-index: 5000;
      top:0px;
      left:0px;

opacity:1;

}


  1. header { 
      position: relative;
      /*background:url(../images/bg.png) repeat-x;

background-color:#34495e; 

      border-radius: 0 0 10px 10px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 15px 15px;
      height:95px;
      font-family: "Helvetica Neue","Arial",sans-serif;
     
      border-top-width:0px;
      max-width:980px;
      width:970px;
      margin-left:-15px;

}


  1. nav-strip a { 
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      cursor: hand;

}


  1. nav-strip ul { 
     margin:0;
     padding:0;
     list-style:none;

}



  1. nav-strip { 
     margin-top:50px;
     margin-left:-25px;
     width: auto;
     height: 25px;
     position: absolute;
     z-index:9999;
     left:190px;

}


  1. nav-strip a:hover { text-decoration:none;}


  1. nav-strip ul li.nav-item { 
      display: inline;
      float: left;
      position:relative;
      padding-top:10px;
      width:120px;/*主菜单宽 110px*/
      height: 35px;
      text-align:center;

}


  1. nav-strip ul li.nav-item:hover,
  2. nav-strip ul li.nav-item.hover { 
   background: #fff;

}

  1. nav-strip ul li.nav-item:hover a,
  2. nav-strip ul li.nav-item.hover a { 
    color: #000;

}

  1. nav-strip ul li a { 
       color:#fff;/*#09c;*/
       display:block;
       font-size: 20px;

font-weight:200; }


  1. nav-strip ul li .subnav { 
      display: none;
      position:absolute;
      background: #34495e;
      top:45px;

}

  1. nav-strip ul li .subnav ul li:hover{

background-color:#4d77a1; }

  1. nav-strip .subnav-inner { 
      float: left;
      width: 120px;

}

  1. nav-strip .subnav .subnav-inner ul li.hp{

height:60px; background-color:#34495e; }

  1. nav-strip .subnav .subnav-inner ul .hp:hover{

background:#7599bc; }


  1. nav-strip ul li .subnav ul { 
      float: left;
      width: 120px;
      list-style:none;

height:auto; }


  1. nav-strip ul li .subnav ul li { 
      display:block;
      border-top:2px outset #34495e;/*1b2d3f;*/

float:left; 

      width: 120px;/*白线宽120px度*/

}


  1. nav-strip ul li .subnav ul li a { 
      font-weight: normal;
      margin-top:12px;
      height:32px;
      margin-bottom:2px;

margin-top:8px; }


  1. nav-strip ul li .subnav ul li a,
  2. nav-strip ul li.nav-item:hover .subnav ul li a{ 
      position: relative;
      color: #fff;
      text-align:center;

}


  1. nav-strip ul li .subnav ul li a,
  2. nav-strip ul li.nav-item:hover .subnav ul li a { white-space: normal;}


  1. nav-strip ul li .subnav ul li.active a,
  2. nav-strip ul li .subnav ul li a:hover { color:#000;}


  1. team_logo { 
     width: 275px; 
     height: 45px; 
     float: left;
     margin-top:5px;
     margin-left:-95px;
     font-size:35px;
     font-family:'Open Sans',"Helvetica Neue",arial,serif;


}


  1. team_logo a{ 
     color:#ed7751;
     text-decoration:none;
     text-shadow: 4px 3px 0.5px #03C 0.6;
     position:relative;

}

  1. team_logo a img{

width:220px; height:134px; }

  1. team_logo a:active{ 
   text-shadow:2px 2px 2px #f1f0f0;
   left:1px;
   top:1px;

}

  1. team_logo:hover a{ color:#439b66;}
  1. igem { 
      float:right;
      margin-top:-1px;
      margin-right:-55px;
      height:83px; 
      width:110px; 
      }
  1. igem a img{ 
       transition:width 1s, height 1s;
       -moz-transition:width 1s, height 1s, -moz-transform 1s; 
       -webkit-transition:width 1s, height 1s, -webkit-transform 1s; 
       -o-transition:width 1s, height 1s, -o-transform 1s; 
       -ms-transition:width 1s, height 1s, -ms-transform 1s;

}

  1. igem a img:hover{ 
       transform:rotate(360deg);
       -moz-transform:rotate(360deg);
       -webkit-transform:rotate(360deg);
       -o-transform:rotate(360deg); 
       -ms-transition:width 1s, height 1s, -ms-transform 1s;

}

Retrieved from "http://2013.igem.org/Template:USTC-Software/header/css"