Template:USTC-Software/header2/css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
#header {
#header {
-
      position: relative;
+
    position: relative;
-
 
+
    background-color:#34495e;
-
  background-color:#34495e;
+
    border-radius: 0 0 10px 10px;
-
      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:100px;
-
      height:100px;
+
    font-family: "Helvetica Neue","Arial",sans-serif;
-
      font-family: "Helvetica Neue","Arial",sans-serif;
+
    border-top-width:0px;
-
 
+
    max-width:100%;
-
      border-top-width:0px;
+
    width:100%;
-
      max-width:100%;
+
-
      width:100%;
+
-
 
+
-
 
+
}
}
#top {
#top {
-
  background-color:#34495e;
+
    background-color:#34495e;
-
      width:100%;
+
    width:100%;
-
      height:100px;
+
    height:100px;
-
      z-index: 5000;
+
    z-index: 5000;
-
      top:0px;
+
    top:0px;
-
      left:0px;
+
    left:0px;
-
  opacity:1;
+
    opacity:1;
}
}
.menu {
.menu {
-
font:18px Arial, Helvetica, sans-serif;
+
    font:18px Arial, Helvetica, sans-serif;
-
width:100%;
+
    width:100%;
-
padding-top:50px;
+
    padding-top:50px;
-
 
+
}
}
.menu ul {
.menu ul {
-
padding:0;
+
    padding:0;
-
margin:0;
+
    margin:0;
-
list-style-type: none;
+
    list-style-type: none;
}
}
.menu ul li {
.menu ul li {
-
float:left;
+
    float:left;
-
position: relative;
+
    position: relative;
 +
    list-style-type: none;
}
}
.menu ul li a, .menu ul li a:visited {
.menu ul li a, .menu ul li a:visited {
-
display:block;
+
    display:block;
-
text-align:center;
+
    text-align:center;
-
text-decoration:none;
+
    text-decoration:none;
-
width:130px;
+
    width:130px;
-
height:40px;
+
    height:40px;
-
color:#fff;
+
    color:#fff;
-
border:1px solid #34495e;
+
    border:1px solid #34495e;
-
border-width:1px 1px 0 0;
+
    border-width:1px 1px 0 0;
-
background:#34495e;
+
    background:#34495e;
-
line-height:40px;
+
    line-height:40px;
-
font-size:18px;
+
    font-size:18px;
-
letter-spacing:1px;
+
    letter-spacing:1px;
}
}
Line 68: Line 64:
.menu ul li:hover a {
.menu ul li:hover a {
-
color:#000;
+
    color:#000;
-
background:#fff;
+
    background:#fff;
}
}
.menu ul li:hover ul {
.menu ul li:hover ul {
-
display:block;
+
    display:block;
-
position:fixed;
+
    position:fixed;
-
top:99px;
+
    top:99px;
-
width:150px;
+
    width:150px;
}
}
.menu ul li:hover ul li a {
.menu ul li:hover ul li a {
-
display:block;
+
    display:block;
-
background:#34495e;
+
    background:#34495e;
-
height:40px;
+
    height:40px;
-
line-height:40px;
+
    line-height:40px;
-
color:#fff;
+
    color:#fff;
-
font-size:16px;
+
    font-size:16px;
}
}
.menu ul li:hover ul li a:hover {
.menu ul li:hover ul li a:hover {
-
background:#7599bc;
+
    background:#7599bc;
     color:#fff;
     color:#fff;
}
}
Line 98: Line 94:
#igem {
#igem {
-
      float:right;
+
    float:right;
-
      margin-top:-1px;
+
    margin-top:-1px;
-
      margin-right:-55px;
+
    margin-right:-55px;
-
      height:83px;  
+
    height:83px;  
-
      width:110px;  
+
    width:110px;  
-
      }
+
}
#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; /* Firefox 4 */
-
        -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
+
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
-
        -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
+
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
-
        -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); /* Firefox 4 */
-
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
+
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
-
        -o-transform:rotate(360deg); /* Opera */
+
    -o-transform:rotate(360deg); /* Opera */
-
        -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/
+
    -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/
}
}

Revision as of 12:26, 27 October 2013

  1. header {
   position: relative;
   background-color:#34495e;
   border-radius: 0 0 10px 10px;
   -moz-border-radius: 0 0 5px 5px;
   -webkit-border-radius: 0 0 15px 15px;
   height:100px;
   font-family: "Helvetica Neue","Arial",sans-serif;
   border-top-width:0px;
   max-width:100%;
   width:100%;

}


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

}

.menu {

   font:18px Arial, Helvetica, sans-serif;
   width:100%;
   padding-top:50px;

}


.menu ul {

   padding:0;
   margin:0;
   list-style-type: none;

}


.menu ul li {

   float:left;
   position: relative;
   list-style-type: none;

}


.menu ul li a, .menu ul li a:visited {

   display:block;
   text-align:center;
   text-decoration:none;
   width:130px;
   height:40px;
   color:#fff;
   border:1px solid #34495e;
   border-width:1px 1px 0 0;
   background:#34495e;
   line-height:40px;
   font-size:18px;
   letter-spacing:1px;

}


.menu ul li ul {display: none;}


.menu ul li:hover a {

   color:#000;
   background:#fff;

}


.menu ul li:hover ul {

   display:block;
   position:fixed;
   top:99px;
   width:150px;

}


.menu ul li:hover ul li a {

   display:block;
   background:#34495e;
   height:40px;
   line-height:40px;
   color:#fff;
   font-size:16px;

}


.menu ul li:hover ul li a:hover {

   background:#7599bc;
   color:#fff;

}


  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; /* Firefox 4 */
   -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
   -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
   -ms-transition:width 1s, height 1s, -ms-transform 1s;

}

  1. igem a img:hover{
   transform:rotate(360deg);
   -moz-transform:rotate(360deg); /* Firefox 4 */
   -webkit-transform:rotate(360deg); /* Safari and Chrome */
   -o-transform:rotate(360deg); /* Opera */
   -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/

}