Template:USTC-Software/header/css

From 2013.igem.org

(Difference between revisions)
Line 48: Line 48:
#nav-strip {
#nav-strip {
       margin:0;
       margin:0;
-
       width: auto;/*总宽度*/
+
       width: auto;
       height: 45px;
       height: 45px;
       position: absolute;
       position: absolute;
Line 56: Line 56:
-
#nav-strip a:hover { text-decoration:none;}
+
#nav-strip a:hover{
 +
      text-decoration:none;
 +
}
Line 64: Line 66:
       position:relative;
       position:relative;
       padding-top:15px;
       padding-top:15px;
-
       width:110px;/*主菜单宽*/
+
       width:110px;
       height: 30px;
       height: 30px;
       text-align:center;
       text-align:center;
Line 70: Line 72:
-
#nav-strip ul li.nav-item:hover,
+
#nav-strip ul li.nav-item:hover,#nav-strip ul li.nav-item.hover {  
-
#nav-strip ul li.nav-item.hover { background: #1bb6dd;}
+
      background: #1bb6dd;
-
 
+
}
-
#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, #nav-strip ul li.nav-item.hover a {
 +
      color: #FFF;
 +
}
#nav-strip ul li a {
#nav-strip ul li a {
         color: #213443;
         color: #213443;
Line 125: Line 128:
       color: #fff;
       color: #fff;
       text-align:center;
       text-align:center;
-
}<!--下拉菜单的高度-->
+
}
-
#nav-strip ul li .subnav ul li a,
+
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a {  
-
#nav-strip ul li.nav-item:hover .subnav ul li a { white-space: normal;}
+
      white-space: normal;
 +
}
-
#nav-strip ul li .subnav ul li.active a,
+
#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 a:hover { color:#000!important;}
+
      color:#000!important;
 +
}
Line 170: Line 175:
}
}
-
#team_logo:hover a{ color:#1bb6dd;}
+
#team_logo:hover a{  
 +
    color:#1bb6dd;
 +
}
#igem {
#igem {
Line 186: Line 193:
#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; /* Firefox 4 */
+
         -moz-transition:width 1s, height 1s, -moz-transform 1s;  
-
         -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
+
         -webkit-transition:width 1s, height 1s, -webkit-transform 1s;  
-
         -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
+
         -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); /* Firefox 4 */
+
         -moz-transform:rotate(360deg);  
-
         -webkit-transform:rotate(360deg); /* Safari and Chrome */
+
         -webkit-transform:rotate(360deg);  
-
         -o-transform:rotate(360deg); /* Opera */
+
         -o-transform:rotate(360deg);  
-
         -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/
+
         -ms-transition:width 1s, height 1s, -ms-transform 1s;
}
}

Revision as of 16:35, 21 September 2013

  1. top { 
      position: fixed;
      background: #1bb6dd;
      width:100%;
      height:50px;
      z-index: 5000;
      top:0px;
      left:0px;
      border-radius: 0 0 5px 5px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 15px 15px;

}


  1. header { 
      position: relative;
      background: #fff;
      border-radius: 0 0 5px 5px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 15px 15px;
      height: 45px;
      font-family: "Helvetica Neue","Arial",sans-serif;
      /*border: 5px #1bb6dd solid;*/
      border-top-width:0px;
      max-width:960px;
      width:955px;
      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:0;
     width: auto;
     height: 45px;
     position: absolute;
     z-index:9999;
     left:270px;

}


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

}


  1. nav-strip ul li.nav-item { 
      display: inline;
      float: left;
      position:relative;
      padding-top:15px;
      width:110px;
      height: 30px;
      text-align:center;

}


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

}

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

}

  1. nav-strip ul li a { 
       color: #213443;
       display:block;
       font-size: 14px;/*主菜单字体大小*/

}


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

}


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

}


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

}


  1. nav-strip ul li .subnav ul li { 
      display:block;
      border-bottom:1px solid #fff;		
      float:left;
      width: 110px;

}


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

}


  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,#nav-strip ul li.nav-item:hover .subnav ul li a { 
      white-space: normal;

}


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

}


  1. team_logo { 
     width: auto; 
     height: 15px; 
     float: left;
     margin-top:12px;
     margin-left:5px;
     font-size:36px;
     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;

}


  1. team_logo a{ 
     color:#39af87;
     text-decoration:none;
     text-shadow: 4px 3px 0.5px #f2f1f1;
     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;

}

  1. team_logo a:active{ 
   text-shadow:6px 4px 1px #999;
   left:1px;
   top:1px;

}

  1. team_logo:hover a{ 
   color:#1bb6dd;

}

  1. igem { 
      float:right;
      margin-top:-1px;
      margin-right:-25px;
      background: url(USTC-Software_circle.png) no-repeat center;
      height:80px; 
      width:160px; 
      border-bottom-right-radius:1000px;
      border-bottom-left-radius:1000px;
      border-top-left-radius:0px;
      border-top-right-radius:0px;

}

  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"