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

Line 10: Line 10:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; background: #f5f5f5;}
+
.Content{ width: 100%; background: cornsilk;}
 
.Content .title{ width: 100%; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding-top: 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 .Students,.Content .Teachers{ width: 80%; margin: auto;}
 
.Content .Students,.Content .Teachers{ width: 80%; margin: auto;}
−
.Content .Students .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 950px;}
+
.Content .Students .scroll{ width: 100%; position: relative; overflow: hidden; height: 750px;}
−
.Content .Teachers .scroll{ height: 100%; width: 100%; position: relative; overflow: hidden; height: 1000px;}
+
.Content .Teachers .scroll{ width: 100%; position: relative; overflow: hidden; height: 600px;}
−
.Content ul{ width: 300%; position: absolute; height: inherit;}
+
.Content ul{ width: 500%; position: absolute; height: inherit; left: -507px;}
−
.Content ul li{ text-align: justify; margin: 1.29%; font-size: 1.5rem; width: 8.5%; float: left; height: inherit;}
+
.Content ul li{ text-align: justify; margin: 85px 58.5px; font-size: 1.5rem; width: 8.5%; float: left; height: inherit; border: 5px dashed burlywood; padding: 20px; border-radius: 20px; height: 650px; width: 390px; overflow: hidden}
 +
.Content .Teachers ul li{ height: 400px;}
 
.Content ul li img{ margin: auto; margin-bottom: 15px;}
 
.Content ul li img{ margin: auto; margin-bottom: 15px;}
−
.Content ul li p{ margin-bottom: 15px; color: #333333; line-height: 2; }
+
.Content ul li p{ margin-bottom: 5px; color: #333333; line-height: 1.8; }
 
.Content ul li .name{ font-size: 2.5rem; text-align: center;}
 
.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{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 330px; left: -75px; cursor: pointer; border-radius: 100%;}
 
.Content .icon_left img{float: right; width: 30px; margin: 30px; margin-top: 45px;}
 
.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_left:hover,.Content .icon_right:hover{ background: #BCD68D;}
−
.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{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 330px; right: -75px; cursor: pointer; border-radius: 100%;}
 
.Content .icon_right img{float: left; width: 30px; margin: 30px; margin-top: 45px;}
 
.Content .icon_right img{float: left; width: 30px; margin: 30px; margin-top: 45px;}
 +
.Content .Teachers .icon_left,.Content .Teachers .icon_right{ top: 200px;}
  
  
Line 33: Line 35:
 
.header .logo span{ margin-top: 17px;}
 
.header .logo span{ margin-top: 17px;}
 
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
.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;}
 
 
}
 
}
  
Line 62: Line 46:
 
.header .nav .Awards{ width: 120px;}
 
.header .nav .Awards{ width: 120px;}
 
.header .nav .mainnav span{ margin-bottom: 22.5px; padding-top: 6px;}
 
.header .nav .mainnav span{ margin-bottom: 22.5px; padding-top: 6px;}
−
.Content .Students .scroll{ height: 1150px;}
+
.Content ul{ left: -450px;}
−
.Content .Students .scroll{ height: 1350px;}
+
.Content ul li{ margin: 85px 36.5px;}
 
}
 
}
  
 
/*--1024--*/
 
/*--1024--*/
 
@media only screen and (max-width: 1024px) {
 
@media only screen and (max-width: 1024px) {
−
.Content .Students .scroll{ height: 1000px;}
+
.Content ul{ left: -830px;}
−
.Content .Teachers .scroll{ height: 1200px;}
+
.Content ul li{ margin: 85px 220px;}
 
}
 
}

Revision as of 03:01, 18 September 2017

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

.SSTi-SZGD{ background: url(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: cornsilk;} .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{ width: 100%; position: relative; overflow: hidden; height: 750px;} .Content .Teachers .scroll{ width: 100%; position: relative; overflow: hidden; height: 600px;} .Content ul{ width: 500%; position: absolute; height: inherit; left: -507px;} .Content ul li{ text-align: justify; margin: 85px 58.5px; font-size: 1.5rem; width: 8.5%; float: left; height: inherit; border: 5px dashed burlywood; padding: 20px; border-radius: 20px; height: 650px; width: 390px; overflow: hidden} .Content .Teachers ul li{ height: 400px;} .Content ul li img{ margin: auto; margin-bottom: 15px;} .Content ul li p{ margin-bottom: 5px; color: #333333; line-height: 1.8; } .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: 330px; 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: #BCD68D;} .Content .icon_right{ position: absolute; width: 150px; height: 150px; background: rgba(0,0,0,0.431373); top: 330px; right: -75px; cursor: pointer; border-radius: 100%;} .Content .icon_right img{float: left; width: 30px; margin: 30px; margin-top: 45px;} .Content .Teachers .icon_left,.Content .Teachers .icon_right{ top: 200px;}


/*兼容*/ /*--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;} }

/*--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 ul{ left: -450px;} .Content ul li{ margin: 85px 36.5px;} }

/*--1024--*/ @media only screen and (max-width: 1024px) { .Content ul{ left: -830px;} .Content ul li{ margin: 85px 220px;} }