顶栏

web/dbzq.css

@@ -4,11 +4,16 @@
     box-sizing: border-box;
 }
 
+html {
+    background: #ECEBF1;
+}
+
 body {
     width: 1600px;
     margin: 0 auto;
-    background: #FFFFFF;
+    background: #ECEBF1;
-    font-family: "Microsoft YaHei", Arial, sans-serif;
+    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;
+    color: #414141;
-    display: flex;
-    align-items: center;
 }
 
+/* 军网导航箭头 */
 .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;
+.topbar .toplinks-link {
-    margin: 0 4px;
+    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%;

web/dbzq.html

@@ -12,42 +12,39 @@
     <!-- 板块1：顶部工具栏 -->
     <div class="topbar">
         <div class="wrap">
-            <span class="welcome">
+            <img class="welcome-icon" src="assest/房子 1@2x.png" alt="">
-                <img src="assest/房子 1@2x.png" alt="">
+            <span class="welcome-text">东部战区海军强军网集群</span>
-                东部战区海军强军网集群
+            <img class="welcome-arrow" src="assest/Polygon 28.png" alt="">
-                <img class="arrow" src="assest/Polygon 28.png" alt="">
+
-            </span>
             <span class="nav">军网导航</span>
             <img class="nav-arrow" src="assest/Polygon 28.png" alt="">
+
             <form class="searchbox" onsubmit="return false;">
-                <input type="text" placeholder="请输入关键字">
+                <div class="search-input-wrap">
+                    <img class="search-icon" src="assest/Vector.png" alt="">
+                    <input type="text" placeholder="请输入关键字">
+                </div>
                 <button type="submit">全站搜索</button>
             </form>
-            <div class="toplinks">
+
-                <a href="javascript:;">陈章溦 已登录</a> |
+            <a class="user-info" href="javascript:;">标题标题 已登录</a>
-                <a href="javascript:;">退出</a> |
+
-                <a href="javascript:;">注册</a> |
+            <a class="toplinks-link link-exit" href="javascript:;">
-                <a href="javascript:;">网盘</a>
+                <img class="top-icon" src="assest/登出 1.png" alt="">
-            </div>
+                退出
+            </a>
+            <a class="toplinks-link link-register" href="javascript:;">
+                <img class="top-icon" src="assest/注册 1.png" alt="">
+                注册
+            </a>
+            <a class="toplinks-link link-disk" href="javascript:;">
+                <img class="top-icon" src="assest/云 1.png" alt="">
+                网盘
+            </a>
+            <img class="links-arrow" src="assest/Polygon 28.png" alt="">
         </div>
     </div>
 
-    <!-- 板块2：导航栏 53px -->
-    <nav class="navbar">
-        <div class="wrap">
-            <ul>
-                <li><a href="javascript:;" class="active">首页</a></li>
-                <li><a href="javascript:;">战区要闻</a></li>
-                <li><a href="javascript:;">部队动态</a></li>
-                <li><a href="javascript:;">军事资讯</a></li>
-                <li><a href="javascript:;">政策法规</a></li>
-                <li><a href="javascript:;">强军文化</a></li>
-                <li><a href="javascript:;">服务保障</a></li>
-                <li><a href="javascript:;">在线留言</a></li>
-            </ul>
-        </div>
-    </nav>
-
     <!-- 板块3：网站头部切图 -->
     <div class="header-banner">
         <img src="assest/网站头部切图.png" alt="网站头部切图">