(Created page with "→*reset css start: body, html { background-color: white; width: 100%; height: 100%; } #content { padding: 0; width: 100%; margin: 0; border: non...") |
|||
Line 92: | Line 92: | ||
height: 42px; | height: 42px; | ||
width: 100%; | width: 100%; | ||
− | background-color: #dbffd1; | + | /* background-color: #dbffd1; */ |
+ | background-color: #f8f8f8; | ||
+ | border-bottom: solid 1px #f3c980; | ||
} | } | ||
Line 113: | Line 115: | ||
height: 42px; | height: 42px; | ||
border-radius: 100%; | border-radius: 100%; | ||
− | background: url('https://static.igem.org/mediawiki/2021/ | + | background: url('https://static.igem.org/mediawiki/2021/f/f9/T--SHSID--homepage-logo2.png') no-repeat center; |
/* position: absolute; */ | /* position: absolute; */ | ||
background-size: 42px; | background-size: 42px; |
Revision as of 13:18, 13 October 2021
/**reset css start*/ body, html {
background-color: white; width: 100%; height: 100%;
}
- content {
padding: 0; width: 100%; margin: 0; border: none; box-sizing: border-box; overflow-x: hidden;
}
- globalWrapper {
padding-bottom: 0; box-sizing: border-box;
}
- sideMenu,
- top_title,
.patrollink,
- firstHeading,
- home_logo,
- sideMenu {
display: none;
}
- top_menu_14 {
display: none;
}
- top_menu_under {
display: none;
}
p {
margin: 0; line-height: 0;
}
- mw-content-text {
overflow-x: hidden;
}
/**reset css end*/ .clearfix:after {
content: ; display: block; clear: both;
}
- {
margin: 0; padding: 0; font-family: "微软雅黑", "Microsoft YaHei";
}
ul, ol {
list-style: none;
}
a {
text-decoration: none; cursor: pointer; color: inherit;
}
a:visited, a:link {
color: inherit; text-decoration: none;
} /**导航相关的 start*/ nav {
position: relative; width: 100%; height: 85px;
}
.top-block {
height: 43px; width: 100%; background-color: #585858;
}
.top-nav-bar {
height: 42px; width: 100%; /* background-color: #dbffd1; */ background-color: #f8f8f8;
border-bottom: solid 1px #f3c980; }
.top-nav-bar a {
padding-right: 0 !important; display: inline-block;
}
.top-nav-bar>ul {
/* position: relative; */ width: 1366px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
}
.top-nav-bar>ul>.small-logo {
width: 42px; height: 42px; border-radius: 100%; background: url('https://static.igem.org/mediawiki/2021/f/f9/T--SHSID--homepage-logo2.png') no-repeat center; /* position: absolute; */ background-size: 42px; border-radius: 100%; left: 0; display: inline-block; top: 0;
}
.top-nav-bar>ul>li {
margin-left: 76px; height: 42px; line-height: 42px; transition: all .3s; -webkit-transition: all .3s; font-size: 16px; color: #1d1d1d;
}
.top-nav-bar>ul>li>.sub-nav {
position: absolute; height: 102px; width: 100%; left: 0; z-index: 2; right: 0; background: #f9f9fa;
}
.sub-nav>ul {
width: 914px; margin: 0 auto; display: flex; /* padding: 0 35px; */ box-sizing: border-box; align-items: center; /*justify-content: space-between;*/ justify-content: space-evenly;
}
.sub-nav>ul>li {
position: relative; height: 102px; line-height: 102px; transition: all .3s; -webkit-transition: all .3s; font-size: 16px; color: #3a3a3a;
}
.sub-nav>ul>li>a:active, .sub-nav>ul>li:active .sub-nav>ul>li>a:visited, .sub-nav>ul>li:visited, .sub-nav>ul>li>a:hover, .sub-nav>ul>li:hover, .sub-nav>ul>li>a:focus, .sub-nav>ul>li:focus, .sub-nav>ul>li>a:focus-visible, .sub-nav>ul>li:focus-visible {
color: #e7cc24; display: inline-block;
}
.sub-nav>ul>.current-sub-nav>a {
color: #e7cc24; display: inline-block;
}
.sub-nav>ul>li:active::after, .sub-nav>ul>li:visited::after, .sub-nav>ul>li:hover::after, .sub-nav>ul>li:focus::after, .sub-nav>ul>li:focus-visible::after, .sub-nav>ul>.current-sub-nav::after {
content: ; width: 100%; display: block; height: 4px; background-color: #e7cc24; bottom: 0; position: absolute;
}
.top-nav-bar>ul>li>.sub-nav {
display: none;
}
.top-nav-bar>ul>li.active, .top-nav-bar>ul>li:hover {
color: #e7cc24;
}
.top-nav-bar>ul>li.active>.sub-nav, .top-nav-bar>ul>li:hover>.sub-nav {
display: block;
} /*解决前面有子菜单的hover上去被后面的子菜单遮盖*/ .top-nav-bar>ul>li:hover>.sub-nav {
z-index: 99;
} /**导航相关的 end*/
/**首页相关 start*/ .home-content {
background: #fff; width: 1366px; margin: 0 auto; padding-bottom: 43px; box-sizing: border-box;
}
.home-content>.top-banner {
width: 100%; /* height: 731px; */ height: auto; margin-bottom: 41px; position: relative;
}
.home-content>.group-photo {
width: 100%; height: 769px; margin-bottom: 41px; position: relative;
}
.home-content>.top-banner>img, .home-content>.group-photo img {
width: 100%; /* height: 100%; */ height: auto; display: block;
}
.home-content>.top-banner>span {
position: absolute; z-index: 2; font-size: 88px; color: #fff; left: 120px; bottom: 100px;
}
.home-content>.team-tips {
width: 100%; height: 711px; margin-bottom: 41px; padding: 90px 95px; box-sizing: border-box; background: #474747;
}
.home-content>.team-tips>.team-tips-title {
margin-bottom: 82px; font-family: SourceHanSansCN-Medium; font-size: 36px !important; line-height: 1; letter-spacing: 0px; color: #f3f3f3;
}
.home-content>.team-tips>.team-tips-wrap {
width: 100%; display: flex; /* height: 418px; */ align-items: center; justify-content: space-between;
}
.home-content>.team-tips>.team-tips-wrap>.team-tips-content {
flex: 1; font-size: 24px !important; line-height: 36px; letter-spacing: 0px; color: #f3f3f3; text-align: justify;
}
.home-content>.team-tips>.team-tips-wrap>.team-tips-img {
display: inline-block; width: 418px; height: 418px; margin-left: 33px;
} /**首页相关end*/
/**子页面相关start*/ .sub-content {
background: #fff; max-width: 914px; margin: 0 auto; margin-top: 102px; padding-bottom: 45px; box-sizing: border-box;
}
.no-margin-top {
margin-top: 0;
}
.sub-content>.sub-title {
padding-top: 50px; padding-bottom: 50px; font-family: SourceHanSansCN-Bold; font-size: 36px; font-weight: normal; letter-spacing: 0px; color: #242424; text-align: center; box-sizing: border-box;
}
.sub-content>.article-title {
font-family: SourceHanSansCN-Medium; font-size: 24px; margin-bottom: 16px; letter-spacing: 0px; color: #3161b5;
}
.sub-content>.article-content {
font-family: SourceHanSansCN-Medium; font-size: 16px; letter-spacing: 0px; color: #4c4c4c; text-align: justify; margin-bottom: 16px; line-height: 24px; word-break: break-all;
}
.sub-content>.black-font {
color: #242424; font-family: SourceHanSansCN-Bold;
}
.sub-content>.img-wrap {
width: 100%; text-align: center; margin-top: 11px; margin-bottom: 16px;
}
.sub-content>.img-wrap>img {
display: inline-block; max-width: 100%; /* width: 814px; height: 459px; */
}
.sub-content>.img-wrap>span {
display: block; text-align: center; font-family: SourceHanSansCN-Medium; font-size: 16px; line-height: 16px; letter-spacing: 0px; margin-top: 18px; color: #aeaeae;
}
.sub-content .sub-pdf {
width: 100%; height: 800px;
}
.sub-content>.section-wrap {
margin-bottom: 4px; width: 100%;
} .sub-content>.section-wrap>.item-title{
width: 100%; height: 62px; padding-left: 70px; box-sizing: border-box; font-family: SourceHanSansCN-Medium;
font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 62px; letter-spacing: 0px; color: #ffffff;
} .sub-content>.section-wrap>.item-title:hover{
opacity: .7;
} .sub-content>.section-wrap>.item-content{
width: 100%; height: auto; display: none;
} .sub-content>.section-wrap>.item-content>img{
width: 100%; height: auto;
} .sub-content>.section-wrap>.item-title.in + .item-content{
display: none;
} .sub-content>.section-wrap>.item-title.out + .item-content{
display: block;
} .sub-content>.section-wrap>.item-title.in{
background-color: #1d1d1f;
} .sub-content>.section-wrap>.item-title.out{
background-color: #585858;
} .sub-content>.sub-content-members-wrap{
width: 100%; height: auto;
} .sub-content>.sub-content-members-wrap>.member-item{
display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 60px;
} .sub-content>.sub-content-members-wrap>.member-item>.member-head{
display: flex; align-items: center; flex-direction: column; width: 247px; padding-right: 40px; box-sizing: border-box;
} .sub-content>.sub-content-members-wrap>.member-item>.member-head>img{
width: 207px; height: 207px; border-radius: 100%; margin-bottom: 13px; display: inline-block;
} .sub-content>.sub-content-members-wrap>.member-item>.member-head>span{
display: block;
font-family: SourceHanSansCN-Medium; font-size: 20px;
text-align: center;
line-height: 20px; letter-spacing: 0px; color: #464646; } .sub-content>.sub-content-members-wrap>.member-item>.member-info{
flex: 1; font-family: ArialMT;
font-size: 19px; line-height: 22px; letter-spacing: 0px; color: #464646;
text-align: justify;
} .no-margin {
margin: 0;
}
- sub-table {
width: 100%; border: 1px solid #464646; box-sizing: border-box;
}
- sub-table tr {
font-size: 18px;
}
- sub-table tr th {
height: 100px; background: #d0e1f3; color: #464646; padding: 10px; vertical-align: middle; border: 1px solid #464646; border-collapse: collapse;
}
- sub-table tr td {
height: 70px; padding: 10px; text-align: center; color: #464646; vertical-align: middle; border: 1px solid #464646; border-collapse: collapse;
}
- sub-table tr td a{
color:#1f72cc;
} /**子页面相关end**/
/*底部样式start*/ .footer {
width: 100%; height: 536px; background: #f5f5f7; padding-top: 89px; box-sizing: border-box;
}
.footer>.footer-wrap {
width: 1366px; margin: 0 auto; height: 100%; padding-top: 58px; border-top: 1px solid #666; box-sizing: border-box;
}
.footer>.footer-wrap >.contact-tips {
font-family: SourceHanSansCN-Medium;
font-size: 18px; line-height: 18px; color: #666666;
margin-bottom: 31px; text-align: center;
}
.footer>.footer-wrap >img {
width: 506px; height: 261px; margin: 0 auto; display: block;
}
.margin-bottom-14 {
margin-bottom: 8px;
}
.line {
margin: 14px 0;
}
/**底部样式end*/