* { margin:0; padding: 0; list-style: none; font-size: 20px; } /*region导航*/ header{ position: sticky; top:0; z-index: 100; } .nav-container .container{ height:80px; background-image:radial-gradient(ellipse at left, rgba(88,159,125), rgba(88,159,125),rgba(88,159,125)); } .menu-active1{ display: flex; margin-right: 25px; margin-top: 20px; } .logo .brand{ position: absolute; margin: 15px 100px; } .menu-list{ border-radius:10px; width: 200px; height: 40px; text-align: center; line-height: 34px; transition: 3s; cursor: pointer; } .menu-list:hover{ background-color: #589F7D; } .menu-list li:hover{ background-color:#6fd3a3; } .menu-list li{ height:0; transition: 1s; opacity: 0; transform: translateY(-36px); background-color:#589F7D; } .menu-list li:last-child{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding-bottom: 5px; } .menu-list:hover li{ height: 34px; opacity: 1; transform: translateY(0); } header .mobile-menu { display: none; } /*endregion导航*/ /*f返回首页*/ .right-aside { position: fixed; bottom: 30px; right: 20px; } /*region标题*/ .content-row-list { width: 100%; } .content-row-list>.row-cols-1 { display: flex; background: #C9E4D4; } .content-row-list>.row-cols-1>.content-col-4 { width: 33.33%; } .content-row-list>.row-cols-1>.content-col-4>img { width: 80%; } .content-row-list>.row-cols-1>.content-col-4-h1 { width: 33.33%; margin-top: auto; margin-bottom: auto } .content-row-list>.row-cols-1>.content-col-4-h1>h1 { color: var(--text-title); text-transform: uppercase; font-weight: bolder; text-align: center; font-size: 2.5rem; color: #6bd898; } /*endregion标题*/ /*region侧栏*/ .contain-list{ width: 25%; background-color: rgb(255, 255, 255); position: sticky; top:80px; } .left-list{ text-align: right; padding-right: 10%; border-right:3px solid black; margin-top: 10pt; } .left-list h1 a{ font-size: 17pt; } .left-list h1{ line-height: 50pt; } .left-list h1 a:hover{ color:#6fd3a3; } /*endregion侧栏*/ /*region内容*/ .contain-list1{ width: 70%; background-color: rgb(255, 255, 255); margin-right: 30pt; } .right-list h2{ font-family: 'spooky'; font-size: 22pt; line-height: 50pt; text-align: center; margin-top: 50pt; font-weight: 700; } .right-list h3{ text-align: justify; font-size: 17pt; text-indent: 3em; } img{ margin: 0 auto; } .left-list a{ color: black; font-size: 20pt; font-weight: 700; } .right-list h2:first-of-type{ margin-top: 10pt;} .right-list h4{ text-align: justify; } .right-list h5{ font-size: 20pt; margin-top: 10pt; font-weight: bold; } .right-list h4:nth-of-type(4){ margin-bottom: 15pt;} .space{ height:20pt; } /*region内容*/ /*endregion结尾*/ .right-aside{ position: fixed; bottom: 30px; right: 20px; } footer{ background-color: #589F7D; margin-top: 200px; } .fbox{ width: 1200px; margin: 0 auto; display: flex; } .fleft{ flex: 30%; } .frihgt{ flex:70%; } .pics{ display: flex; } .pitem{ flex: 1; padding-left: 50px; margin: 20px 0; } #back-to-top-button { display: none; /* 默认情况下隐藏图片 */ position: fixed; bottom: 2px; right: 2px; z-index: 99; cursor: pointer; }