Difference between revisions of "Team:XMU-China/css/homeCss"

Line 11: Line 11:
 
z-index: 5;
 
z-index: 5;
 
margin: 0 auto;
 
margin: 0 auto;
 +
min-width: 1500px;
 
}
 
}
 
.header .headerpic{
 
.header .headerpic{
 
width: 100%;
 
width: 100%;
−
height: 168px;
+
height: 10em;
 
background-color: #fff;
 
background-color: #fff;
−
     box-shadow: lightgrey 10px 10px 30px 5px;
+
     box-shadow: lightgrey 0.6em 0.6em 2em 0.25em;
 
}
 
}
 
.header .logo img{
 
.header .logo img{
 
float: left;
 
float: left;
−
height: 80px;
+
height: 5em;
−
padding-top: 40px;
+
padding-top: 2.5em;
−
padding-left: 60px;
+
padding-left: 3.75em;
 
}
 
}
−
.clear{
+
.header .nav{
−
clear: both;
+
min-width: 1500px;
 
}
 
}
 
.header .nav ul li{
 
.header .nav ul li{
 
float:right;
 
float:right;
 
list-style:none;
 
list-style:none;
−
line-height: 50px;
+
font-size: 1.3em;
−
font-size: 24.5px;
+
font-family: sans-serif;
 +
font-weight: bolder;
 +
text-align: center;
 
color:#2500b3;
 
color:#2500b3;
−
padding-right: 70px;
+
padding-right: 3%;
 
position: relative;
 
position: relative;
−
top: -109px;
+
top: -4.2em;
−
left: -50px;
+
 
}
 
}
 
.header .nav ul li img{
 
.header .nav ul li img{
−
width: 90px;
+
height: 2em;
 +
position: relative;
 +
top: -0.5em;
 
}
 
}
−
.headerpic_bottom{
+
.main{
−
width: 100%;
+
position: relative;
−
height: 168px;
+
min-width: 1500px;
−
position: absolute;
+
−
background-color: #fff;
+
 
}
 
}
−
.main{margin: 0 auto;}
 
 
.main .main_top{
 
.main .main_top{
−
padding-left: 400px;
+
position: relative;
−
padding-top: 150px;
+
left: 20%;
 +
padding-top: 10%;
 +
font-family: sans-serif;
 +
min-width: 1000px;
 
}
 
}
 
.main .main_top p{
 
.main .main_top p{
−
font-size:30px;
+
font-size:1.8em;
−
line-height: 40px;
+
line-height: 1em;
−
padding-top: 20px;
+
padding-top: 1em;
 
font-weight: lighter;
 
font-weight: lighter;
 
}
 
}
 
.main .main_top div{
 
.main .main_top div{
−
font-size: 65px;
+
font-size: 5em;
−
font-weight: bold;
+
font-weight: bolder;
 
color:#2500b3;
 
color:#2500b3;
 
}
 
}
 
.main .bg img{
 
.main .bg img{
 
width: 100%;
 
width: 100%;
 +
min-width: 1500px;
 
z-index: -1;
 
z-index: -1;
 
}
 
}
 
/*轮播图预留*/
 
/*轮播图预留*/
−
.main .turn{
 
−
position: absolute;
 
−
width: 800px;
 
−
height:600px;
 
−
background-color: blue;
 
−
top:500px;
 
−
left:400px;
 
−
}
 
 
.main .main_middle{
 
.main .main_middle{
 
/* background: blue;*/
 
/* background: blue;*/
−
position: relative;
+
position: absolute;
−
top: -1000px;
+
top: 50%;
 
text-align:center;
 
text-align:center;
 
z-index: 1;
 
z-index: 1;
 
color: #fff;
 
color: #fff;
 +
width: 100%;
 
}
 
}
−
.main .main_middle div{
+
.main .main_middle div div{
−
font-size: 45px;
+
font-size: 2.8em;
 
font-weight: bold;
 
font-weight: bold;
−
line-height: 100px;
+
font-family: sans-serif;
 
}
 
}
 
.main .main_middle p{
 
.main .main_middle p{
−
line-height: 32px;
+
padding-top: 1em;
−
font-size: 25px;
+
line-height: 1.25em;
−
font-family: 等线;
+
font-size: 1.56em;
 +
font-family: sans-serif;
 
font-weight: lighter;
 
font-weight: lighter;
 
}
 
}
−
.main .turn2{
+
/*通用*/
−
width: 800px;
+
.footer{
−
height: 300px;
+
margin: 0 auto;
−
background-color: blue;
+
−
position: absolute;
+
−
top: 1600px;
+
−
right: 951.5px;
+
−
margin-right: -400px;
+
−
}
+
−
.main .main_bottom {
+
−
min-width: 1920px;
+
−
position: absolute;
+
−
top: 2000px;
+
−
}
+
−
.main .main_bottom img{
+
 
width: 100%;
 
width: 100%;
 +
min-width: 1500px;
 +
position: relative;
 
}
 
}
−
 
−
/*通用*/
 
−
.footer{margin: 0 auto;}
 
 
.footer .footer_top{
 
.footer .footer_top{
 
z-index: 1;
 
z-index: 1;
−
position: relative;
 
−
top: -200px;
 
−
padding-left: 290px;
 
−
font-size: 22px;
 
−
font-weight: lighter;
 
−
line-height: 40px;
 
−
color:#2500b3;
 
 
}
 
}
 
.footer .footer_top img{
 
.footer .footer_top img{
−
width: 480px;
+
height: 7.5em;
 +
float: left;
 +
position: relative;
 +
top: 1.5em;
 +
left: 20%;
 
}
 
}
 
.footer .footer_top ul{
 
.footer .footer_top ul{
 +
width: 10%;
 +
min-width: 155px;
 +
height: 2em;
 
list-style: none;
 
list-style: none;
 
float: right;
 
float: right;
 
position: relative;
 
position: relative;
−
right: 250px;
+
right: 20%;
−
padding-right: 100px;
+
color:#2500b3;
−
margin-top: -30px;
+
font-family: sans-serif;
 +
font-weight: lighter;
 +
font-size: 1.375em;
 +
line-height: 1.5em;
 
}
 
}
 
/*通用*/
 
/*通用*/
−
.footer .footer_middle{
+
.footer .footer_line{
−
position: absolute;
+
position: relative;
 
background-color:#2500b3;
 
background-color:#2500b3;
−
width: 1400px;
+
width: 80%;
 
height: 1px;
 
height: 1px;
−
top: 2600px;
+
left: 10%;
−
left: 251.5px;
+
right: 10%;
 +
top: 5em;
 +
}
 +
.footer .footer_bottom{
 +
width: 100%;
 
}
 
}
 
.footer .footer_bottom .footer_bottom_1{
 
.footer .footer_bottom .footer_bottom_1{
 
width: 100%;
 
width: 100%;
−
float: left;
+
padding-top: 10%;
 
}
 
}
−
.footer .footer_bottom .footer_bottom_1 img{
+
.footer_bottom_1_pic2{
−
height: 110px;
+
height: 7em;
 +
float: right;
 +
position: relative;
 +
right: 20%;
 +
}
 +
.footer_bottom_1_pic1{
 +
height: 7em;
 +
float: left;
 
position: relative;
 
position: relative;
 
left: 20%;
 
left: 20%;
−
padding-right: 150px;
 
 
}
 
}
 
#Contact_us{
 
#Contact_us{
−
font-size: 30px;
+
font-size: 2em;
−
padding-top: 20px;
+
float: left;
−
padding-left: 450px;
+
position: relative;
 +
font-family: sans-serif;
 +
left: 25%;
 
color:#2500b3;
 
color:#2500b3;
 +
}
 +
.footer .footer_bottom .footer_bottom_2{
 +
padding-top: 1%;
 +
}
 +
 +
.footer .footer_bottom .footer_bottom_2 ul li{
 +
list-style: none;
 +
position: relative;
 +
left: 26%;
 
}
 
}
 
.footer .footer_bottom .footer_bottom_2 ul li img{
 
.footer .footer_bottom .footer_bottom_2 ul li img{
−
width: 45px;
+
width: 2.5%;
 
float: left;
 
float: left;
 +
padding-left: 1.5%;
 +
 +
}
 +
#logo_position{
 +
width: 2.5%;
 +
float: right;
 
position: relative;
 
position: relative;
−
left: 33%;
+
right: 45%;
−
margin-top: -40px;
+
−
padding-right: 20px;
+
−
}
+
−
.footer .footer_bottom .footer_bottom_2 .logo_position{
+
−
padding-left: 200px;
+
 
}
 
}
 
.footer .footer_bottom .footer_bottom_word{
 
.footer .footer_bottom .footer_bottom_word{
−
font-size: 15px;
+
font-size: 1em;
 
position: relative;
 
position: relative;
−
left: 640px;
+
line-height: 1.5em;
−
line-height: 23px;
+
−
top:-42px;
+
 
color:#2500b3;
 
color:#2500b3;
−
float: left;
+
float: right;
 +
right: 15%;
 
}
 
}
 +
 +
 +
 
.igem_2018_team_mobile_bar{
 
.igem_2018_team_mobile_bar{
 
display: none !important;
 
display: none !important;
Line 195: Line 208:
 
z-index: -2;
 
z-index: -2;
 
background: white;
 
background: white;
 +
}
 +
.clear{
 +
clear: both;
 
}
 
}

Revision as of 14:23, 2 August 2018

  • {

padding: 0; margin: 0; } html body{ width: 100%; height: 100%; } .header{ /* position: fixed;*/ z-index: 5; margin: 0 auto; min-width: 1500px; } .header .headerpic{ width: 100%; height: 10em; background-color: #fff; 

   box-shadow: lightgrey 0.6em 0.6em 2em 0.25em;

} .header .logo img{ float: left; height: 5em; padding-top: 2.5em; padding-left: 3.75em; } .header .nav{ min-width: 1500px; } .header .nav ul li{ float:right; list-style:none; font-size: 1.3em; font-family: sans-serif; font-weight: bolder; text-align: center; color:#2500b3; padding-right: 3%; position: relative; top: -4.2em; } .header .nav ul li img{ height: 2em; position: relative; top: -0.5em; } .main{ position: relative; min-width: 1500px; } .main .main_top{ position: relative; left: 20%; padding-top: 10%; font-family: sans-serif; min-width: 1000px; } .main .main_top p{ font-size:1.8em; line-height: 1em; padding-top: 1em; font-weight: lighter; } .main .main_top div{ font-size: 5em; font-weight: bolder; color:#2500b3; } .main .bg img{ width: 100%; min-width: 1500px; z-index: -1; } /*轮播图预留*/ .main .main_middle{ /* background: blue;*/ position: absolute; top: 50%; text-align:center; z-index: 1; color: #fff; width: 100%; } .main .main_middle div div{ font-size: 2.8em; font-weight: bold; font-family: sans-serif; } .main .main_middle p{ padding-top: 1em; line-height: 1.25em; font-size: 1.56em; font-family: sans-serif; font-weight: lighter; } /*通用*/ .footer{ margin: 0 auto; width: 100%; min-width: 1500px; position: relative; } .footer .footer_top{ z-index: 1; } .footer .footer_top img{ height: 7.5em; float: left; position: relative; top: 1.5em; left: 20%; } .footer .footer_top ul{ width: 10%; min-width: 155px; height: 2em; list-style: none; float: right; position: relative; right: 20%; color:#2500b3; font-family: sans-serif; font-weight: lighter; font-size: 1.375em; line-height: 1.5em; } /*通用*/ .footer .footer_line{ position: relative; background-color:#2500b3; width: 80%; height: 1px; left: 10%; right: 10%; top: 5em; } .footer .footer_bottom{ width: 100%; } .footer .footer_bottom .footer_bottom_1{ width: 100%; padding-top: 10%; } .footer_bottom_1_pic2{ height: 7em; float: right; position: relative; right: 20%; } .footer_bottom_1_pic1{ height: 7em; float: left; position: relative; left: 20%; }

  1. Contact_us{

font-size: 2em; float: left; position: relative; font-family: sans-serif; left: 25%; color:#2500b3; } .footer .footer_bottom .footer_bottom_2{ padding-top: 1%; }

.footer .footer_bottom .footer_bottom_2 ul li{ list-style: none; position: relative; left: 26%; } .footer .footer_bottom .footer_bottom_2 ul li img{ width: 2.5%; float: left; padding-left: 1.5%;

}

  1. logo_position{

width: 2.5%; float: right; position: relative; right: 45%; } .footer .footer_bottom .footer_bottom_word{ font-size: 1em; position: relative; line-height: 1.5em; color:#2500b3; float: right; right: 15%; }


.igem_2018_team_mobile_bar{ display: none !important; }

  1. top_title{

display: none !important; }

  1. globalWrapper,#content,.mw-body{

padding: 0 !important; margin: 0 !important; } .per{ min-width: 1800px; z-index: -2; background: white; } .clear{ clear: both; }