Difference between revisions of "Team:WHU-China/Homepage"

Line 9: Line 9:
 
.container{
 
.container{
 
position:absolute;
 
position:absolute;
−
    width: 100%;
+
height:960px;
 +
        width: 100%;
 
}
 
}
 
.header{
 
.header{
 
background-color:#000;
 
background-color:#000;
 +
height:350px;
 
overflow:hidden;
 
overflow:hidden;
 
z-index:1;
 
z-index:1;
Line 21: Line 23:
 
left:50%;
 
left:50%;
 
overflow:hidden;
 
overflow:hidden;
−
 
+
margin-left:-640px;
 
z-index:0;
 
z-index:0;
 
}
 
}
Line 35: Line 37:
 
background-color:#000;
 
background-color:#000;
 
width:100%;
 
width:100%;
 +
top:350px;
 +
height:100px;
 
z-index:2;
 
z-index:2;
 
}
 
}
 
.menu{
 
.menu{
 
position:absolute;
 
position:absolute;
 +
top:350px;
 +
width:1280px;
 +
height:200px;
 
z-index:4;
 
z-index:4;
 
}
 
}
Line 45: Line 52:
 
padding:0;
 
padding:0;
 
list-style:none;
 
list-style:none;
−
}
 
−
.menu ul li:first-child{
 
−
position:relative;
 
−
margin-left:7%;
 
−
padding:0;
 
−
display:inline;
 
−
float:left;
 
 
}
 
}
 
.menu ul li{
 
.menu ul li{
Line 57: Line 57:
 
margin-left:4%;
 
margin-left:4%;
 
padding:0;
 
padding:0;
 +
width:150px;
 
display:inline;
 
display:inline;
 
float:left;
 
float:left;
Line 79: Line 80:
 
border-width:medium;
 
border-width:medium;
 
position:relative;
 
position:relative;
 +
top:-150px;
 +
width:147px;
 
}
 
}
 
.menu ul li ul li:first-child{
 
.menu ul li ul li:first-child{
Line 85: Line 88:
 
.menu ul li:hover ul li:first-child{
 
.menu ul li:hover ul li:first-child{
 
opacity:1;
 
opacity:1;
 +
height:200px;
 
}
 
}
 
.menu ul li:hover ul li{
 
.menu ul li:hover ul li{
 
background-color:#000;
 
background-color:#000;
−
height:50px;
+
height:50px
−
line-height:50px;
+
 
}
 
}
 
.menu ul li:hover ul li a{
 
.menu ul li:hover ul li a{
 
opacity:0.8;
 
opacity:0.8;
 +
}
 +
.menu ul li:hover ul li:first-child{
 +
height:50px;
 
}
 
}
 
.menu ul li ul li:first-child{
 
.menu ul li ul li:first-child{
Line 107: Line 113:
 
padding:0px;
 
padding:0px;
 
margin:0;
 
margin:0;
 +
width:147px;
 
height:0px;
 
height:0px;
 
background-color:#fff;
 
background-color:#fff;
Line 114: Line 121:
 
opacity:0;
 
opacity:0;
 
font-family: 'Lato', sans-serif;
 
font-family: 'Lato', sans-serif;
−
font-size:14px;
+
font-size:18px;
 
color:#fff;
 
color:#fff;
 
display:block;
 
display:block;
Line 132: Line 139:
 
.famen{
 
.famen{
 
position:relative;
 
position:relative;
−
 
+
top:25px;
−
    -moz-transition: all 0.8s ease-in-out;  
+
        -moz-transition: all 0.8s ease-in-out;  
 
-webkit-transition: all 0.8s ease-in-out;  
 
-webkit-transition: all 0.8s ease-in-out;  
 
-o-transition: all 0.8s ease-in-out;  
 
-o-transition: all 0.8s ease-in-out;  
Line 141: Line 148:
 
.word{
 
.word{
 
position:relative;
 
position:relative;
 +
top:-85px;
 +
left:35px;
 
z-index:4;
 
z-index:4;
 
}
 
}
Line 146: Line 155:
 
color:#fff;
 
color:#fff;
 
font-family:Tahoma, Geneva, sans-serif;
 
font-family:Tahoma, Geneva, sans-serif;
−
font-size:16px;
+
font-size:20px;
 
}
 
}
 
.sectit{
 
.sectit{
−
vertical-align:central;
+
line-height:50px;
 
opacity:0.95;
 
opacity:0.95;
 
}
 
}
Line 155: Line 164:
 
<script>
 
<script>
 
$(document).ready(function(e) {
 
$(document).ready(function(e) {
−
            $(".container").css("height",$(window).height()*1.5);
 
−
$(".header").css("height",$(window).height()*0.46);
 
−
$(".black").css("top",$(window).height()*0.46);
 
−
$(".black").css("height",$(window).height()*0.13);
 
−
$(".menu").css("top",$(window).height()*0.46);
 
−
$(".menu").css("width",$(window).width()*0.937);
 
−
$(".menu").css("height",$(window).height()*0.26);
 
−
$(".menu ul li").css("width",$(window).width()*0.107);
 
−
$(".menu ul li ul").css("top",-$(window).height()*0.21);
 
−
$(".menu ul li ul").css("width",-$(window).width()*0.107);
 
−
$(".menu ul li:hover ul li").css("height",$(window).height()*0.065);
 
−
$(".menu ul li:hover ul li:first-child").css("height",$(window).height()*0.26);
 
−
$(".menu ul li ul li").css("width",$(window).width()*0.107);
 
−
 
−
$("#homepagetopimg").css("width",$(window).width()*0.9);
 
−
$(".famen").css("width",$(window).width()*0.107);
 
−
$(".famen").css("top",$(window).height()*0.0325);
 
−
$("#igem").css("width",$(window).width()*0.1);
 
−
 
−
var x =$(".famen").position().top;
 
−
var y =$('.famen').width();
 
−
$(".word").css("width",$(".famen").width()*0.5);
 
−
$(".word").css("top",-x-y/2+33-0.041666667*$(window).height());
 
−
$(".word").css("left",$(window).width()*0.0256);
 
−
$(".footer").css("width",$(window).width()*0.9);
 
−
$(".footer").css("margin-left",-$(window).width()*0.9/2);
 
−
 
−
$("#footerimg").css("width",$(window).width()*0.9);
 
 
             $("#w1").hover(
 
             $("#w1").hover(
 
function(){
 
function(){

Revision as of 00:02, 17 September 2015