diff --git a/src/components/Header.css b/src/components/Header.css
index 5d60638..859cff9 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -1,42 +1,94 @@
+/* Header 样式 */
 .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-  .logo-and-name {
-    display: flex;
-    align-items: center;
-  }
-  .logo {
-    height: 30px;
-    margin-right: 10px;
-  }
-  .site-name {
-    font-size: 24px;
-  }
-  .user-and-message {
-    display: flex;
-    align-items: center;
-  }
-  .user-avatar {
-    height: 40px;
-    margin-right: 10px;
-  }
-  .message-center {
-    font-size: 16px;
-  }
-  .nav {
-    background-color: #dab8c2;
-    display: flex;
-    justify-content: center;
-  }
-  .nav-item {
-    color: white;
-    text-decoration: none;
-    padding: 10px 20px;
-  }
-  .active {
-    background-color: #996633;
-  }
-                    
\ No newline at end of file
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px; /* 增加左右间距，避免元素靠得太近 */
+  background-color: #5F4437; /* 深棕色背景 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
+}
+
+/* Logo 和网站名称 */
+.logo-and-name {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  height: 40px;
+  margin-right: 10px;
+}
+
+.site-name {
+  font-size:32px;
+  font-weight: bold;
+  color: #FBF2E3; /* 更加柔和的字体颜色 */
+}
+
+/* 用户头像和消息中心 */
+.user-and-message {
+  display: flex;
+  align-items: center;
+}
+
+.user-avatar {
+  height: 50px;
+  width: 50px; /* 确保头像是圆形 */
+  border-radius: 50%; /* 圆形 */
+  margin-right: 10px;
+}
+
+.message-center {
+  font-size: 24px;
+  color: #FBF2E3; /* 统一字体颜色 */
+  cursor: pointer;
+  transition: color 0.3s ease; /* 平滑过渡 */
+}
+
+.message-center:hover {
+  color: #D8C0A1; /* 当鼠标悬停时字体颜色变亮 */
+}
+
+/* 导航栏样式 */
+.nav {
+  display: flex;
+  justify-content: center;
+  background-color: #dab8c2;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
+  transition: background 0.3s ease; 
+}
+
+/* 每个导航项 */
+.nav-item {
+  padding: 14px 12px;
+  text-decoration: none;
+  color: #FBF2E3;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 8px; /* 圆角效果 */
+  transition: background-color 0.3s, color 0.3s, transform 0.3s ease; /* 平滑过渡 */
+  position: relative; /* 为阴影和动画提供定位 */
+}
+
+/* 鼠标悬停时 */
+.nav-item:hover {
+  background-color: #5c270c; /* 背景色变深 */
+  color: #FBF2E3; /* 字体颜色与背景形成对比 */
+  transform: scale(1.05); /* 微微放大，增加互动感 */
+}
+
+/* 选中状态 */
+.nav-item.active {
+  background-color: #5c270c; /* 活动状态时的背景色 */
+  color: #FBF2E3; /* 活动状态时的字体颜色 */
+  font-weight: bold;
+  border-radius: 16px; /* 更圆的圆角效果 */
+  padding: 4px 12px; /* 减小上下和左右的padding，框变小 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 增加阴影，带来浮动感 */
+  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease; /* 平滑过渡 */
+  transform: scale(1.1); /* 选中项微微放大 */
+  line-height: 40px; /* 调整line-height，使文字更居中 */
+}
+
+