Difference between revisions of "Template:BNU-China/CSS/team"

Line 9: Line 9:
 
.group-list>li {
 
.group-list>li {
 
display: inline-block;
 
display: inline-block;
 +
width: 10%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
width: 10%;
+
border-right-style: outset;
 
color: #272f30;
 
color: #272f30;
 
font-size: 20px;
 
font-size: 20px;
Line 17: Line 18:
 
text-decoration: none;
 
text-decoration: none;
 
cursor: pointer;
 
cursor: pointer;
 +
}
 +
.group-list:last-child {
 +
border-right-style: none;
 
}
 
}
 
.group-list>li:hover {
 
.group-list>li:hover {
background-color: #a87e3b;
+
color: #e5b051;
 
}
 
}
 
.team-row {
 
.team-row {

Revision as of 13:19, 7 October 2017

.group-list { display: inline-block; width: 100%; height: 30px; position: relative; top: 20px; text-align: center; } .group-list>li { display: inline-block; width: 10%; margin: 0; padding: 0; border-right-style: outset; color: #272f30; font-size: 20px; line-height: 30px; text-decoration: none; cursor: pointer; } .group-list:last-child { border-right-style: none; } .group-list>li:hover { color: #e5b051; } .team-row { display: inline-block; width: 100%; position: relative; text-align: center; top: 60px; /*background-color: rgb(247,237,183);*/ } .team-member { display: inline-block; position: relative; top: 0px; width: 300px; height: 200px; padding: 0; background-color: grey; } .member-img { width: 300px; height: 200px; position: absolute; top: 0; left: 0; z-index: 0; } .member-name { width: 300px; height: 30px; line-height: 30px; margin: 0 !important; padding: 0; position: absolute; top: 0; color: white; font-size: 20px; text-align: center; opacity: 1; z-index: 4; } .member-intro { display: none; width: 300px; height: 180px; margin: 0; position: absolute; top: 20px; padding: 5px; color: white; text-indent: 16px; font-size: 15px !important; z-index: 4; }

@media screen and (max-width:911px) {

   #w_Panel>ul>li {
       font-size: 15px;
   }
   #w_Panel>ul>li>ul>li>p {
       font-size: 10px;
   }

}

@media screen and (max-width:767px) {

   .team-row {
       left: 25%;
       width: 75%;
       top: 100px;
   }

}

@media screen and (max-width:480px) {

   .team-row {
       left: 30%;
       width: 70%;
       top: 100px;
   }

}