* { margin: 0; padding: 0; list-style: none; font-size: 20px; } /*region导航*/ body { /* min-height: 500vh; */ } 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导航*/ .Intermediate-content { padding: 0 } .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; } #back-to-top-button { display: none; /* 默认情况下隐藏图片 */ position: fixed; bottom: 20px; right: 20px; z-index: 99; cursor: pointer; } /*region标题*/ .section { position: relative; width: 100%; height: 70vh; justify-content: center; align-items: center; display: flex; overflow: hidden; } .section::before { content: ''; position: absolute; width: 100vh; height: 20vh; left: 50%; background: #E2F0E8; border-radius: 50%; transform: translateX(-50%)scale(4); transform-origin: bottom; z-index: -10; padding: 20vh 0; } .section.title1 { position: relative; z-index: 1; text-align: center; } p { color: #589F7D; font-family: 'CROSS'; font-size: 120pt; } @font-face { font-family: CROSS; src: url(crossedout-1gxje.ttf); } /*endregion标题*/ /*region侧栏*/ @font-face { font-family: school; src: url(animekidspersonaluse-p7yzd.otf); } .contain-list { width: 20%; height: 40vh; 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 { font-weight: 700; line-height: 50pt; } .left-list h1 a{ font-size: 17pt; } .left-list h1 a:hover{ color:#6fd3a3; } /*endregion侧栏*/ /*region内容*/ .contain-list1 { width: 75%; /* height: 330vh; */ background-color: rgb(255, 255, 255); /* margin-right: 30pt; */ margin: 0 auto; } .contain-list1 .right-list h2 { font-weight: 700; } .contain-list1 .right-list p { font-size: 24px; line-height: 1.5; color: black; text-indent: 2em; } .indent-first-line { text-indent: 2em; } @font-face { font-family: spooky; src: url(spookywebbie-lgvxx.ttf); } .right-list h2 { font-family: 'spooky'; font-size: 22pt; line-height: 50pt; text-align: center; margin-top: 50pt; } .right-list h3 { text-align: justify; font-size: 17pt; } img { margin: 0 auto; } .left-list a { color: black; font-size: 20pt; } .right-list h2:first-of-type { margin-top: 10pt; } /*region内容*/ /*footer*/ footer { background-color: #589F7D; } .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; } /*endfooter*/