的撒法

css/index.css

@@ -77,124 +77,85 @@
 }
 
 /* ============================================
-   Header 登录注册按钮重新设计
+   Header 右侧导航重新设计
    ============================================ */
 
-/* nav-right 按钮容器布局 */
+/* nav-right 布局 */
 #index .nav-right {
   display: flex;
-  align-items: center;
+  align-items: stretch;
-  gap: 12px;
+  height: 100%;
 }
 
-/* 文档、控制台按钮优化 */
+/* 纯文字链接样式 */
-#index .nav-right .control {
+#index .nav-right .nav-text-link {
   color: #CBD5E1;
-  padding: 8px 16px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0 16px;
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid transparent;
-}
-
-/* 控制台按钮背景动画 */
-#index .nav-right .control::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(56, 189, 248, 0.08);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.3s ease;
-  z-index: -1;
-}
-
-#index .nav-right .control:hover {
-  color: #38BDF8;
-  border-color: rgba(56, 189, 248, 0.2);
-  transform: translateY(-2px);
-}
-
-#index .nav-right .control:hover::before {
-  transform: scaleX(1);
-}
-
-/* 登录注册按钮容器 */
-#index .no-login {
   display: flex;
   align-items: center;
-  gap: 8px;
+  transition: all 0.3s ease;
-  margin-left: 8px;
+  cursor: pointer;
+  text-decoration: none;
 }
 
-/* 登录按钮 - 线框风格 */
+#index .nav-right .nav-text-link:hover {
-#index .nav-right .btn-normal-light,
+  color: #38BDF8;
-#index .nav-right #loginBtn {
+}
-  padding: 8px 20px;
+
+/* 分隔符样式 */
+#index .nav-right .nav-divider {
+  color: rgba(148, 163, 184, 0.3);
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  user-select: none;
+}
+
+/* 登录注册容器 */
+#index .no-login {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  margin-left: 0;
+}
+
+/* 注册文字链接 */
+#index .no-login .nav-text-link {
+  padding-right: 20px;
+}
+
+/* 登录按钮包装器 - 与 header 等高 */
+#index .login-btn-wrapper {
+  display: flex;
+  align-items: stretch;
+  margin-left: 20px;
+  border-left: 1px solid rgba(148, 163, 184, 0.15);
+}
+
+/* 登录按钮 - 与 header 等高 */
+#index .btn-login,
+#index #loginBtn {
+  padding: 0 32px;
   font-size: 14px;
   font-weight: 500;
-  color: #E5E7EB;
-  background: transparent;
-  border: 1px solid rgba(148, 163, 184, 0.3);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-#index .nav-right .btn-normal-light::before,
-#index .nav-right #loginBtn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(56, 189, 248, 0.15);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s ease, height 0.6s ease;
-}
-
-#index .nav-right .btn-normal-light:hover,
-#index .nav-right #loginBtn:hover {
-  border-color: rgba(56, 189, 248, 0.6);
-  color: #38BDF8;
-  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
-  transform: translateY(-2px);
-}
-
-#index .nav-right .btn-normal-light:hover::before,
-#index .nav-right #loginBtn:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-/* 注册按钮 - 渐变填充风格 */
-#index .nav-right .btn-normal,
-#index .nav-right #registBtn {
-  padding: 8px 20px;
-  font-size: 14px;
-  font-weight: 600;
   color: #ffffff;
   background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
-  border: 1px solid transparent;
+  border: none;
-  border-radius: 8px;
+  border-radius: 0;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
 }
 
-#index .nav-right .btn-normal::before,
+#index .btn-login::before,
-#index .nav-right #registBtn::before {
+#index #loginBtn::before {
   content: '';
   position: absolute;
   top: 0;
@@ -206,21 +167,19 @@
   transition: opacity 0.3s ease;
 }
 
-#index .nav-right .btn-normal:hover,
+#index .btn-login:hover,
-#index .nav-right #registBtn:hover {
+#index #loginBtn:hover {
-  box-shadow:
+  background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%);
-    0 6px 20px rgba(56, 189, 248, 0.4),
-    0 0 30px rgba(56, 189, 248, 0.3);
-  transform: translateY(-2px);
 }
 
-#index .nav-right .btn-normal:hover::before,
+#index .btn-login:hover::before,
-#index .nav-right #registBtn:hover::before {
+#index #loginBtn:hover::before {
   opacity: 1;
 }
 
-#index .nav-right .btn-normal span,
+/* 登录按钮文字在最上层 */
-#index .nav-right #registBtn span {
+#index .btn-login span,
+#index #loginBtn span {
   position: relative;
   z-index: 1;
 }
@@ -230,15 +189,15 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 12px;
+  padding: 0 20px;
-  border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
+  border-left: 1px solid rgba(148, 163, 184, 0.15);
 }
 
 #index .login-in:hover {
-  background: rgba(56, 189, 248, 0.08);
+  background: rgba(56, 189, 248, 0.05);
 }
 
 #index .login-in .head-img {
@@ -263,17 +222,16 @@
 
 /* 响应式适配 */
 @media (max-width: 768px) {
-  #index .nav-right .control {
+  #index .nav-right .nav-text-link {
-    padding: 6px 12px;
+    padding: 0 12px;
     font-size: 13px;
   }
 
-  #index .nav-right .btn-normal-light,
+  #index .btn-login,
-  #index .nav-right #loginBtn,
+  #index #loginBtn {
-  #index .nav-right .btn-normal,
+    padding: 0 24px;
-  #index .nav-right #registBtn {
-    padding: 6px 16px;
     font-size: 13px;
+    min-width: 80px;
   }
 }
 

public/header.html

@@ -29,18 +29,15 @@
       </div>
     </div>
     <div class="nav-right">
-      <a href="/document.html">
+      <a href="/document.html" class="nav-text-link">文档</a>
-        <div class="control">文档</div>
+      <span class="nav-divider">|</span>
-      </a>
+      <a href="/home.htm" class="nav-text-link">控制台</a>
-      <!-- <a href="">
+      <span class="nav-divider">|</span>
-        <div class="control">备案</div>
-      </a> -->
-      <a href="/home.htm">
-        <div class="control">控制台</div>
-      </a>
       <div class="no-login" style="display: none;">
-        <div class="btn btn-normal-light mr-10" id="loginBtn">登录</div>
+        <span class="nav-text-link" id="registBtn">注册</span>
-        <div class="btn btn-normal" id="registBtn">立即注册</div>
+        <div class="login-btn-wrapper">
+          <div class="btn btn-login" id="loginBtn">登录</div>
+        </div>
       </div>
       <div class="login-in " style="display: none;">
         <div id="headImg" class="head-img"></div>