@font-face { font-family: "叶根友飘悦飞草2.0"; src: url("fonts/叶根友飘悦飞草2.0.TTF") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "方正粗倩简体"; src: url("fonts/FZCuQian.ttf") format("truetype"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #ECEBF1; } body { position: relative; width: 1600px; margin: 0 auto; background: #ECEBF1; font-family: "Microsoft YaHei-Regular", Arial, sans-serif; font-weight: Regular; color: #333; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { display: block; border: 0; } .wrap { width: 1600px; margin: 0 auto; } /* ========== 板块1:顶部工具栏 ========== */ .topbar { position: relative; width: 1600px; height: 43px; background: #F7F7F7; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: #555; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .topbar .wrap { position: relative; width: 1600px; height: 100%; } .topbar .welcome-icon { position: absolute; left: 203px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; } .topbar .welcome-text { position: absolute; left: 222px; top: 50%; transform: translateY(-50%); color: #414141; white-space: nowrap; } .topbar .welcome-arrow { position: absolute; left: 380px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .nav { position: absolute; left: 416px; top: 50%; transform: translateY(-50%); color: #414141; } .topbar .nav-arrow { position: absolute; left: 474px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .searchbox { position: absolute; left: 688px; top: 50%; transform: translateY(-50%); display: flex; height: 33px; } .topbar .search-input-wrap { position: relative; width: 228px; height: 33px; } .topbar .searchbox input { width: 228px; height: 33px; padding: 0 8px 0 28px; border: 1px solid #ccc; border-right: 0; font-size: 12px; outline: none; color: #626468; } .topbar .searchbox input::placeholder { color: #626468; } .topbar .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; } .topbar .searchbox button { height: 33px; width: 79px; padding: 0 14px; border: 1px solid #ccc; border-left: 0; background: #F4F4F4; cursor: pointer; font-size: 12px; color: #626468; } .user-info { position: absolute; left: 1046px; top: 50%; transform: translateY(-50%); color: #414141; font-size: 12px; } .topbar .toplinks-link { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 14px; color: #414141; } .topbar .toplinks-link .top-icon { width: 12px; height: 12px; } .topbar .link-exit .top-icon { width: 17px; height: 18px; } .topbar .link-register .top-icon { width: 16px; height: 18px; } .topbar .link-disk .top-icon { width: 16px; height: 15px; } .topbar .link-exit { left: 1164px; } .topbar .link-register { left: 1246px; } .topbar .link-disk { left: 1326px; } .topbar .links-arrow { position: absolute; left: 1388px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .toplinks-link:hover { color: #c00; } /* ========== 板块3:网站头部切图 ========== */ .header-banner { position: relative; width: 100%; } .header-banner img:first-child { width: 100%; } .header-banner .header-logo { position: absolute; left: 199px; right: 1190px; top: 23px; bottom: 313px; width: calc(100% - 1389px); height: calc(100% - 336px); object-fit: contain; } .header-banner .layer-35 { position: absolute; left: 0; bottom: 32px; width: 100%; } .header-banner .layer-35 > img:first-child { display: block; width: 100%; } .header-banner .layer-side-links { position: absolute; left: 1244px; top: 11px; display: flex; flex-direction: column; gap: 7px; } .header-banner .layer-side-item { display: flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; } .header-banner .layer-side-item img { width: 41px; height: 41px; flex-shrink: 0; } .header-banner .layer-side-item span { font-family: "方正粗倩简体", sans-serif; font-size: 16px; font-weight: normal; font-style: normal; line-height: 1; color: #fff; } .header-banner .layer-35-content { position: absolute; left: 215px; right: 392px; top: 12px; bottom: 0; display: flex; align-items: stretch; color: rgba(255, 255, 255, 0.85); } .header-banner .layer-nav-col { position: relative; flex: 1; min-width: 0; padding: 0 10px; } .header-banner .layer-nav-col:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 8px; width: 1px; height: 70%; background: rgba(180, 190, 210, 0.45); } .header-banner .layer-nav-col h3 { font-family: "叶根友飘悦飞草2.0", cursive; font-size: 24px; font-weight: normal; line-height: 1.2; margin-bottom: 6px; color: rgba(255, 255, 255, 0.95); letter-spacing: 1px; } .header-banner .layer-nav-col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; row-gap: 2px; } .header-banner .layer-nav-culture ul { grid-template-columns: repeat(3, auto); column-gap: 10px; justify-content: start; } .header-banner .layer-nav-col li a { display: block; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 14px; line-height: 1.6; color: rgba(220, 228, 240, 0.9); white-space: nowrap; } .header-banner .layer-nav-col li a:hover { color: #fff; } /* ========== 大标题区 ========== */ .headline-box { position: absolute; top: 489px; left: 50%; transform: translateX(-50%); width: 1200px; height: 105px; background: rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 2; box-sizing: border-box; padding: 0 20px; } .headline-box .headline-main { font-size: 40px; font-weight: bold; color: #0b408a; line-height: 1.2; text-align: center; white-space: nowrap; } .headline-box .headline-subs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; } .headline-box .headline-subs li { font-size: 16px; color: #0b408a; line-height: 1.4; white-space: nowrap; } /* ========== Footer ========== */ .footer { width: 100%; background: #1a4a8a; color: #fff; padding: 30px 0; margin-top: 120px; } .footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; } .footer-left h4 { font-size: 18px; margin-bottom: 10px; } .footer-left p { font-size: 13px; line-height: 1.8; color: #c8d4e8; } .footer-right { text-align: right; font-size: 12px; color: #c8d4e8; line-height: 1.8; }