Line 2: | Line 2: | ||
display: inline-block; | display: inline-block; | ||
width: 83%; | width: 83%; | ||
− | height: | + | height: 30px; |
position: relative; | position: relative; | ||
left: 9.9%; | left: 9.9%; | ||
− | top: | + | top: 20px; |
} | } | ||
.group-list > li { | .group-list > li { | ||
display: inline-block; | display: inline-block; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
width: 100px; | width: 100px; | ||
+ | color: blue; | ||
+ | font-size: 20px; | ||
+ | line-height: 30px; | ||
text-decoration: none; | text-decoration: none; | ||
cursor: pointer; | cursor: pointer; | ||
Line 18: | Line 23: | ||
position: relative; | position: relative; | ||
text-align: center; | text-align: center; | ||
− | top: | + | top: 60px; |
− | background-color: rgb(247,237,183); | + | /*background-color: rgb(247,237,183);*/ |
} | } | ||
.team-member { | .team-member { | ||
Line 27: | Line 32: | ||
width: 300px; | width: 300px; | ||
height: 200px; | height: 200px; | ||
− | padding: | + | padding: 0; |
+ | background-color: grey; | ||
} | } | ||
.member-img { | .member-img { | ||
Line 49: | Line 55: | ||
text-align: center; | text-align: center; | ||
opacity: 1; | opacity: 1; | ||
+ | z-index: 4; | ||
} | } | ||
.member-intro { | .member-intro { | ||
Line 61: | Line 68: | ||
text-indent: 16px; | text-indent: 16px; | ||
font-size: 15px !important; | font-size: 15px !important; | ||
+ | z-index: 4; | ||
} | } | ||
Revision as of 12:50, 7 October 2017
.group-list { display: inline-block; width: 83%; height: 30px; position: relative; left: 9.9%; top: 20px; } .group-list > li { display: inline-block; margin: 0; padding: 0; width: 100px; color: blue; font-size: 20px; line-height: 30px; text-decoration: none; cursor: pointer; } .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; }
}