Difference between revisions of "Team:SSTi-SZGD/css/Team"

Line 1: Line 1:
−
body{ min-width: 1347px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 465px; position: relative;}
 
 
−
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
+
.SSTi-SZGD{ background: url(SSTi-SZGD_banner.jpeg：https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
  
 
/*自定义header*/
 
/*自定义header*/
Line 10: Line 10:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; height: 4355px; background: #f5f5f5; padding: 0 5%;}
+
.Content{ width: 100%; background: #f5f5f5;}
−
.Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
+
.Content .title{ width: 100%; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding-top: 50px; letter-spacing: 2px;}
−
.Content ul{ width: 100%; height: 1000px;}
+
.Content .Students,.Content .Teachers{ width: 80%; margin: auto;}
−
.Rebekah,.Richard,.Joyce,.Bob,.Carol,.Linda,.Yolanda,.Jasmine,.Vivian,.Lucky,.Kenny,.Ying_Peng,.Jianglin_Yu,.Shuqiao_Yu,.Zhaoying_Guan{ display: none;}
+
.Content .Students .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 950px;}
 +
.Content .Teachers .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 1000px;}
 +
.Content ul{ width: 300%; position: absolute; height: inherit;}
 +
.Content ul li{ text-align: justify; margin: 1.29%; font-size: 1.5rem; width: 8.5%; float: left; height: inherit;}
 +
.Content ul li img{ margin: auto; margin-bottom: 15px;}
 +
.Content ul li p{ margin-bottom: 15px; color: #333333; line-height: 2; }
 +
.Content ul li .name{ font-size: 2.5rem; text-align: center;}
 +
.Content .icon_left{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 350px; left: -75px; cursor: pointer; border-radius: 100%;}
 +
.Content .icon_left img{float: right; width: 30px; margin: 30px; margin-top: 45px;}
 +
.Content .icon_left:hover,.Content .icon_right:hover{ background: rgba(135,206,235,0.431373);}
 +
.Content .icon_right{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 350px; right: -75px; cursor: pointer; border-radius: 100%;}
 +
.Content .icon_right img{float: left; width: 30px; margin: 30px; margin-top: 45px;}
  
−
/*student*/
 
−
.Content .student{ width: 100%; height: 2970px; font-size: 1.6rem; border-bottom: 1px solid #aaaaaa; margin-bottom: 20px;}
 
−
.Content .student_left{ width: 50%; height: 100%; float: left;}
 
−
.Content .student_right{ width: 50%; height: 100%; float: right;}
 
−
.Content .student_left .left,.Content .student_right .left{ width: 30%; float: left; text-align: center; font-weight: 600;}
 
−
.Content .student_left .right,.Content .student_right .right{ width: 70%; float: left; padding: 30px;}
 
−
.Content .student_left .left img,.Content .student_right .left img{ width: 100%; margin-top: 30px; margin-bottom: 5px;}
 
−
.Content .student_left .right p,.Content .student_right .right p{ width: 100%; word-wrap: break-word; text-align: justify; word-spacing: 2px; line-height: 2.25rem; margin-bottom: 10px;}
 
−
.Content .student li{ height: 500px;}
 
−
.Content .student_left li:nth-of-type(3),.Content .student_right li:nth-of-type(3){ height: 450px;}
 
−
.Content .student_left li:nth-of-type(4),.Content .student_right li:nth-of-type(4){ height: 390px;}
 
−
.Content .student_left li:nth-of-type(5),.Content .student_right li:nth-of-type(5){ height: 720px;}
 
−
.Content .student_left li:nth-of-type(6),.Content .student_right li:nth-of-type(6){ height: 350px;}
 
−
.Content .student_right li:nth-of-type(6) img{ margin: 25px auto}
 
  
−
/*teacher*/
+
 
−
.Content .teacher{ width: 100%; height: 1200px; font-size: 1.6rem;}
+
/*兼容*/
−
.Content .teacher_left{ width: 50%; height: 100%; float: left;}
+
/*--1920--*/
−
.Content .techer_right{ width: 50%; height: 100%; float: right;}
+
@media only screen and (max-width: 1920px) {
−
.Content .teacher_left .left,.Content .techer_right .left{ width: 30%; float: left; text-align: center; font-weight: 600;}
+
.header .logo span{ margin-top: 17px;}
−
.Content .teacher_left .right,.Content .techer_right .right{ width: 70%; float: left; padding: 30px;}
+
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
−
.Content .teacher_left .left img,.Content .techer_right .left img{ width: 100%; margin-top: 30px; margin-bottom: 5px;}
+
}
−
.Content .teacher_left .right p,.Content .techer_right .right p{ width: 100%; word-wrap: break-word; text-align: justify; word-spacing: 2px; line-height: 2.25rem; margin-bottom: 10px;}
+
 
−
.Content .teacher li{ height: 350px;}
+
/*--1600--*/
−
.Content .teacher_left li:nth-of-type(2),.Content .teacher_right li:nth-of-type(2){ height: 810px;}
+
@media only screen and (max-width: 1600px) {
 +
.Content .Students .scroll{ height: 1000px;}
 +
.Content .Teachers .scroll{ height: 1100px;}
 +
}
 +
 
 +
/*--1440--*/
 +
@media only screen and (max-width: 1440px) {
 +
.Content .Students .scroll{ height: 1050px;}
 +
.Content .Teachers .scroll{ height: 1200px;}
 +
}
 +
 
 +
/*--1366--*/
 +
@media only screen and (max-width: 1366px) {
 +
.Content .Students .scroll{ height: 1100px;}
 +
.Content .Teachers .scroll{ height: 1300px;}
 +
}
 +
 
 +
/*--1190--*/
 +
@media only screen and (max-width: 1190px) {
 +
html{ font-size: 52%;}
 +
.header .nav .Team{ width: 100px;}
 +
.header .nav .Project{ width: 90px;}
 +
.header .nav .Parts{ width: 115px;}
 +
.header .nav .Human_Practices{ width: 135px;}
 +
.header .nav .Awards{ width: 120px;}
 +
.header .nav .mainnav span{ margin-bottom: 22.5px; padding-top: 6px;}
 +
.Content .Students .scroll{ height: 1150px;}
 +
.Content .Students .scroll{ height: 1350px;}
 +
}
 +
 
 +
/*--1024--*/
 +
@media only screen and (max-width: 1024px) {
 +
.Content .Students .scroll{ height: 1000px;}
 +
.Content .Teachers .scroll{ height: 1200px;}
 +
}

Revision as of 01:22, 6 September 2017

body{ min-width: 1024px; min-height: 465px; position: relative;}

.SSTi-SZGD{ background: url(SSTi-SZGD_banner.jpeg：SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}

/*自定义header*/ .header .nav .Team span,.header .nav .Team li:nth-of-type(1) a{ color: #FAEE0D;}

.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;} .topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;}

/*Content*/ .Content{ width: 100%; background: #f5f5f5;} .Content .title{ width: 100%; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding-top: 50px; letter-spacing: 2px;} .Content .Students,.Content .Teachers{ width: 80%; margin: auto;} .Content .Students .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 950px;} .Content .Teachers .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 1000px;} .Content ul{ width: 300%; position: absolute; height: inherit;} .Content ul li{ text-align: justify; margin: 1.29%; font-size: 1.5rem; width: 8.5%; float: left; height: inherit;} .Content ul li img{ margin: auto; margin-bottom: 15px;} .Content ul li p{ margin-bottom: 15px; color: #333333; line-height: 2; } .Content ul li .name{ font-size: 2.5rem; text-align: center;} .Content .icon_left{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 350px; left: -75px; cursor: pointer; border-radius: 100%;} .Content .icon_left img{float: right; width: 30px; margin: 30px; margin-top: 45px;} .Content .icon_left:hover,.Content .icon_right:hover{ background: rgba(135,206,235,0.431373);} .Content .icon_right{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 350px; right: -75px; cursor: pointer; border-radius: 100%;} .Content .icon_right img{float: left; width: 30px; margin: 30px; margin-top: 45px;}


/*兼容*/ /*--1920--*/ @media only screen and (max-width: 1920px) { .header .logo span{ margin-top: 17px;} .header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;} }

/*--1600--*/ @media only screen and (max-width: 1600px) { .Content .Students .scroll{ height: 1000px;} .Content .Teachers .scroll{ height: 1100px;} }

/*--1440--*/ @media only screen and (max-width: 1440px) { .Content .Students .scroll{ height: 1050px;} .Content .Teachers .scroll{ height: 1200px;} }

/*--1366--*/ @media only screen and (max-width: 1366px) { .Content .Students .scroll{ height: 1100px;} .Content .Teachers .scroll{ height: 1300px;} }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 52%;} .header .nav .Team{ width: 100px;} .header .nav .Project{ width: 90px;} .header .nav .Parts{ width: 115px;} .header .nav .Human_Practices{ width: 135px;} .header .nav .Awards{ width: 120px;} .header .nav .mainnav span{ margin-bottom: 22.5px; padding-top: 6px;} .Content .Students .scroll{ height: 1150px;} .Content .Students .scroll{ height: 1350px;} }

/*--1024--*/ @media only screen and (max-width: 1024px) { .Content .Students .scroll{ height: 1000px;} .Content .Teachers .scroll{ height: 1200px;} }