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

(Created page with "body{ min-width: 1347px; 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...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
body{ min-width: 1347px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 465px; position: relative; background: #f2f2f2;}
 
 
 
.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(https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
Line 8: Line 8:
 
.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;}
 
.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;}
 
.topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;}
 +
 +
 +
 +
.Content_box{ width: 100%; background: cornsilk;}
 +
/*Content_nav*/
 +
.Content_nav{ width: 17%; position: absolute; left: 4%; color: #394c53;}
 +
.Content_nav p{ font-size: 2rem; text-align: center; font-weight: 500; margin: 15px 5px;}
 +
.Content_nav ul li{ margin: 15px 5px 15px 30px; font-size: 1.5rem; list-style: circle; word-break: break-word; text-decoration: underline;}
 +
.Content_nav a{ color: #394c53;}
 +
/*.Content_nav a:hover{ text-decoration: underline;}*/
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; height: auto; background: #f5f5f5; padding: 0 5%; padding-bottom: 50px;}
+
.Content{ width: 55%; padding: 0 2%; padding-bottom: 50px; margin: auto;}
 
.Content .title{ font-size: 3.5rem; text-align: center; color: #394c53; font-weight: 600;}
 
.Content .title{ font-size: 3.5rem; text-align: center; color: #394c53; font-weight: 600;}
−
.Content img{ height: inherit; float: left; display: none;}
+
.Content img{ height: inherit; float: left;}
−
.Content .img_total{ height: 300px}
+
.Content .img_total{ margin: 40px 20% 20px 20%; height: 350px; overflow: hidden; position: relative;}
−
.Content .img_total img{ width: 60%; margin: 40px 20% 20px 20%;}
+
.Content .img_total .scroll{ position: absolute; width: 300%; left: 0;}
−
.Content .text,.Content .April_29 .collaboration .txt{ font-size: 1.5rem; text-align: justify; color: #333333; font-weight: 300; text-indent: 2rem; line-height: 2.5rem; width: 80%; margin: auto; overflow: hidden; height: 300px;}
+
.Content .img_total .scroll img{ width: 33.3333%; float: left;}
−
.Content .text p,.Content .April_29 .collaboration .txt p{ display: none;}
+
.Content .img_total .icon_left{ position: absolute; width: 50px; height: 70px; background: url(../img/Public_Engagement_icon_left.png) no-repeat rgba(0,0,0,0.431373); top: 140px; left: 0; cursor: pointer; display: none;}
 +
.Content .img_total .icon_right{ position: absolute; width: 50px; height: 70px; background: url(../img/Public_Engagement_icon_right.png) no-repeat rgba(0,0,0,0.431373); top: 140px; right: 0; cursor: pointer; display: none;}
 +
.Content .img_total .icon_left:hover{ background: url(../img/Public_Engagement_icon_left.png) no-repeat rgba(0,0,0,0.5);}
 +
.Content .img_total .icon_right:hover{ background: url(../img/Public_Engagement_icon_right.png) no-repeat rgba(0,0,0,0.5);}
 +
.Content .text,.Content .April_29 .collaboration .txt{ font-size: 1.5rem; text-align: justify; color: #333333; font-weight: 300; line-height: 2.5rem; width: 85%; margin: auto; overflow: hidden;}
 +
.Content .text p:nth-of-type(2){ margin-top: 10px;}
 
.Content .April_29,.Content .June_22,.Content .July_11,.Content .July_26,.Content .July_29{ padding-top: 70px; padding-bottom: 70px; border-bottom: 1px solid #555555;}
 
.Content .April_29,.Content .June_22,.Content .July_11,.Content .July_26,.Content .July_29{ padding-top: 70px; padding-bottom: 70px; border-bottom: 1px solid #555555;}
 
.Content .July_29{ border: none;}
 
.Content .July_29{ border: none;}
 
.Content .April_29 .collaboration .title{ margin-top: 20px; font-size: 3rem;}
 
.Content .April_29 .collaboration .title{ margin-top: 20px; font-size: 3rem;}
−
.Content .April_29 .collaboration .img{ margin: 10px auto; width: 80%; height: 342.5px;}
+
.Content .April_29 .collaboration .img{ margin: 10px auto; width: 100%; height: 342.5px;}
−
.Content .June_22 .img{ margin: 20px auto; width: 80%; height: 323px;}
+
.Content .June_22 .img{ margin: 20px auto; width: 100%; height: 323px;}
−
.Content .July_11 .img{ margin: 20px auto; width: 80%; height: 247.1px;}
+
.Content .July_11 .img{ margin: 20px auto; width: 100%; height: 247.1px;}
−
.Content .July_26 .img{ margin: 20px auto; width: 80%; height: 242.48px;}
+
.Content .July_26 .img{ margin: 20px auto; width: 100%; height: 242.48px;}
−
.Content .July_29 .img{ margin: 20px auto 0 auto; width: 80%; height: 363.7px;}
+
.Content .July_29 .img{ margin: 20px auto 0 auto; width: 100%; height: 363.7px;}
−
.Content .July_29 .img2{ margin: 0 auto; width: 80%; height: 242.48px;}
+
.Content .July_29 .img2{ margin: 0 auto; width: 100%; height: 242.48px;}
 +
 
 +
 
 +
 
 +
/*兼容*/
 +
/*--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;}
 +
}

Latest revision as of 07:07, 18 September 2017

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

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

/*自定义header*/ .header .nav .Human_Practices span,.header .nav .Human_Practices li:nth-of-type(3) 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_box{ width: 100%; background: cornsilk;} /*Content_nav*/ .Content_nav{ width: 17%; position: absolute; left: 4%; color: #394c53;} .Content_nav p{ font-size: 2rem; text-align: center; font-weight: 500; margin: 15px 5px;} .Content_nav ul li{ margin: 15px 5px 15px 30px; font-size: 1.5rem; list-style: circle; word-break: break-word; text-decoration: underline;} .Content_nav a{ color: #394c53;} /*.Content_nav a:hover{ text-decoration: underline;}*/

/*Content*/ .Content{ width: 55%; padding: 0 2%; padding-bottom: 50px; margin: auto;} .Content .title{ font-size: 3.5rem; text-align: center; color: #394c53; font-weight: 600;} .Content img{ height: inherit; float: left;} .Content .img_total{ margin: 40px 20% 20px 20%; height: 350px; overflow: hidden; position: relative;} .Content .img_total .scroll{ position: absolute; width: 300%; left: 0;} .Content .img_total .scroll img{ width: 33.3333%; float: left;} .Content .img_total .icon_left{ position: absolute; width: 50px; height: 70px; background: url(../img/Public_Engagement_icon_left.png) no-repeat rgba(0,0,0,0.431373); top: 140px; left: 0; cursor: pointer; display: none;} .Content .img_total .icon_right{ position: absolute; width: 50px; height: 70px; background: url(../img/Public_Engagement_icon_right.png) no-repeat rgba(0,0,0,0.431373); top: 140px; right: 0; cursor: pointer; display: none;} .Content .img_total .icon_left:hover{ background: url(../img/Public_Engagement_icon_left.png) no-repeat rgba(0,0,0,0.5);} .Content .img_total .icon_right:hover{ background: url(../img/Public_Engagement_icon_right.png) no-repeat rgba(0,0,0,0.5);} .Content .text,.Content .April_29 .collaboration .txt{ font-size: 1.5rem; text-align: justify; color: #333333; font-weight: 300; line-height: 2.5rem; width: 85%; margin: auto; overflow: hidden;} .Content .text p:nth-of-type(2){ margin-top: 10px;} .Content .April_29,.Content .June_22,.Content .July_11,.Content .July_26,.Content .July_29{ padding-top: 70px; padding-bottom: 70px; border-bottom: 1px solid #555555;} .Content .July_29{ border: none;} .Content .April_29 .collaboration .title{ margin-top: 20px; font-size: 3rem;} .Content .April_29 .collaboration .img{ margin: 10px auto; width: 100%; height: 342.5px;} .Content .June_22 .img{ margin: 20px auto; width: 100%; height: 323px;} .Content .July_11 .img{ margin: 20px auto; width: 100%; height: 247.1px;} .Content .July_26 .img{ margin: 20px auto; width: 100%; height: 242.48px;} .Content .July_29 .img{ margin: 20px auto 0 auto; width: 100%; height: 363.7px;} .Content .July_29 .img2{ margin: 0 auto; width: 100%; height: 242.48px;}


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