@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: 13px; line-height: 1.6; color: rgba(220, 228, 240, 0.9); white-space: nowrap; } .header-banner .layer-nav-col li a:hover { color: #fff; } /* ========== Footer ========== */ .footer { position: relative; width: 100%; height: 522px; background: url("assest/网站底部1600 1.png") center top / 100% 100% no-repeat; margin-top: 20px; box-sizing: border-box; } .footer .footer-link { position: absolute; top: 12px; bottom: 494px; height: 16px; line-height: 16px; font-size: 14px; color: #fff; white-space: nowrap; z-index: 2; } .footer .footer-link-stats { left: 1134px; } .footer .footer-link-login { left: 1219px; } .footer .footer-link:hover { opacity: 0.85; } /* logo 基准:左306 底348 */ .footer .footer-logo { position: absolute; left: 306px; bottom: 348px; width: 237px; height: 41px; } /* 中国人民解放军:紧贴 logo 上方,同宽右对齐 */ .footer .footer-org { position: absolute; left: 306px; bottom: 395px; width: 237px; text-align: right; font-size: 16px; font-weight: bold; color: #222; line-height: 1.2; } /* 左侧说明:紧贴 logo 下方,同宽右对齐 */ .footer .footer-left { position: absolute; left: 306px; top: 184px; width: 237px; text-align: right; } .footer .footer-info { font-size: 12px; color: #333; line-height: 1.85; } /* 竖线:logo 右缘外侧,高度覆盖左右内容 */ .footer .footer-divider { position: absolute; left: 560px; bottom: 160px; width: 1px; height: 300px; background: #9aa3ad; } /* 右侧链接:竖线右侧,与「中国人民解放军」顶齐 */ .footer .footer-right { position: absolute; left: 580px; bottom: 160px; right: 180px; top: 100px; } .footer .footer-row { display: flex; align-items: flex-start; margin-bottom: 6px; font-size: 12px; line-height: 1.75; } .footer .footer-label { flex: 0 0 64px; font-weight: bold; color: #333; white-space: nowrap; } .footer .footer-links { flex: 1; display: flex; flex-wrap: wrap; gap: 0 14px; } .footer .footer-links a { color: #777; white-space: nowrap; } .footer .footer-links a:hover { color: #0b408a; }