diff --git a/web/dbzq.css b/web/dbzq.css index 347a64d..cd4e88e 100644 --- a/web/dbzq.css +++ b/web/dbzq.css @@ -4,11 +4,16 @@ box-sizing: border-box; } +html { + background: #ECEBF1; +} + body { width: 1600px; margin: 0 auto; - background: #FFFFFF; - font-family: "Microsoft YaHei", Arial, sans-serif; + background: #ECEBF1; + font-family: "Microsoft YaHei-Regular", Arial, sans-serif; + font-weight: Regular; color: #333; } @@ -36,51 +41,60 @@ img { position: relative; width: 1600px; height: 43px; - background: #f5f5f5; + 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%; - display: flex; - align-items: center; } -.topbar .welcome { +/* 房子图标 */ +.topbar .welcome-icon { position: absolute; left: 203px; top: 50%; transform: translateY(-50%); - color: #333; - display: flex; - align-items: center; -} - -.topbar .welcome img { width: 13px; height: 13px; - margin-right: 6px; } -.topbar .welcome .arrow { +/* 欢迎文字 */ +.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; - margin-left: 14px; - margin-right: 0; } +/* 军网导航 */ .topbar .nav { position: absolute; left: 416px; top: 50%; transform: translateY(-50%); - color: #333; - display: flex; - align-items: center; + color: #414141; } +/* 军网导航箭头 */ .topbar .nav-arrow { position: absolute; left: 474px; @@ -90,21 +104,45 @@ img { 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 { - height: 33px; width: 228px; - padding: 0 8px; + 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 { @@ -116,63 +154,76 @@ img { background: #fff; cursor: pointer; font-size: 12px; + color: #626468; } -.topbar .toplinks { +/* 用户信息 */ +.user-info { position: absolute; - right: 20px; + left: 1046px; top: 50%; transform: translateY(-50%); + color: #414141; + font-size: 12px; } -.topbar .toplinks a { - color: #555; - margin: 0 4px; +/* 右侧链接组 - 每个链接独立绝对定位 */ +.topbar .toplinks-link { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: inline-flex; + align-items: center; + gap: 14px; + color: #414141; } -.topbar .toplinks a:hover { +.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; } -/* ========== 板块2:导航栏 53px ========== */ -.navbar { - width: 100%; - height: 53px; - background: #1a4a8a; -} - -.navbar .wrap { - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.navbar ul { - display: flex; - height: 100%; -} - -.navbar ul li { - height: 100%; -} - -.navbar ul li a { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - padding: 0 32px; - color: #fff; - font-size: 16px; - font-weight: bold; -} - -.navbar ul li a:hover, -.navbar ul li a.active { - background: #0d3266; -} - /* ========== 板块3:网站头部切图 ========== */ .header-banner { width: 100%; diff --git a/web/dbzq.html b/web/dbzq.html index a789221..e567e12 100644 --- a/web/dbzq.html +++ b/web/dbzq.html @@ -12,42 +12,39 @@
- - - 东部战区海军强军网集群 - - + + 东部战区海军强军网集群 + + 军网导航 + - + + + + + + 退出 + + + + 注册 + + + + 网盘 + +
- - -
网站头部切图