"
Template:USTC-Software/header2/css
From 2013.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
#header { | #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%; | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
} | } | ||
#top { | #top { | ||
| - | + | background-color:#34495e; | |
| - | + | width:100%; | |
| - | + | height:100px; | |
| - | + | z-index: 5000; | |
| - | + | top:0px; | |
| - | + | left:0px; | |
| - | + | opacity:1; | |
} | } | ||
.menu { | .menu { | ||
| - | + | font:18px Arial, Helvetica, sans-serif; | |
| - | + | width:100%; | |
| - | + | padding-top:50px; | |
| - | + | ||
} | } | ||
.menu ul { | .menu ul { | ||
| - | + | padding:0; | |
| - | + | margin:0; | |
| - | + | list-style-type: none; | |
} | } | ||
.menu ul li { | .menu ul li { | ||
| - | + | float:left; | |
| - | + | 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; | |
| - | + | 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; | |
} | } | ||
| Line 68: | Line 64: | ||
.menu ul li:hover a { | .menu ul li:hover a { | ||
| - | + | color:#000; | |
| - | + | background:#fff; | |
} | } | ||
.menu ul li:hover ul { | .menu ul li:hover ul { | ||
| - | + | display:block; | |
| - | + | position:fixed; | |
| - | + | top:99px; | |
| - | + | width:150px; | |
} | } | ||
.menu ul li:hover ul li a { | .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 { | .menu ul li:hover ul li a:hover { | ||
| - | + | background:#7599bc; | |
color:#fff; | color:#fff; | ||
} | } | ||
| Line 98: | Line 94: | ||
#igem { | #igem { | ||
| - | + | float:right; | |
| - | + | margin-top:-1px; | |
| - | + | margin-right:-55px; | |
| - | + | height:83px; | |
| - | + | width:110px; | |
| - | + | } | |
#igem a img{ | #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; | |
} | } | ||
| + | |||
#igem a img:hover{ | #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*/ | |
} | } | ||
Revision as of 12:26, 27 October 2013
- 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%;
}
- 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;
}
- igem {
float:right; margin-top:-1px; margin-right:-55px; height:83px; width:110px;
}
- 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;
}
- 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*/
}
