修改：实验一 将已完成的部分颜色修正成实验要求

homework1/index.css

@@ -8,7 +8,7 @@
 
 /* 设置导航栏样式 */
 #navbar {
-  background-color: rgb(49, 42, 42);
+  background-color: rgb(93, 75, 51);
   width: 100%;
   height: 50px;
   /* 确保导航栏内对象居中 */
@@ -16,12 +16,29 @@
   align-items: center;
 }
 
+/* 设置导航栏左侧元素边距 */
+#nav_left {
+  margin-left: 10%;
+}
+
 /* 设置导航栏对象样式*/
 .navobj {
   color: rgb(255, 255, 255);
-  margin-left: 10px;
-  margin-right: 10px;
-  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  border-left: 2px;
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 0;
+  border-color: rgb(107, 88, 63);
+  border-style: solid;
+}
+
+#navbar_regobj {
+  background: rgb(240, 120, 24);
 }
 
 /* 确保导航栏内的链接无蓝字和下划线 */
@@ -38,17 +55,16 @@
 
 /* 下拉菜单按钮样式 */
 .dropbtn {
-  color: white;
+  color: rgb(255, 255, 255);
   padding: 16px;
-  font-size: 16px;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
-/* 为下拉菜单按钮添加三角箭头 */
-.dropbtn::after {
+/* 为商品分类下拉菜单按钮添加三角箭头 */
+#navbar_typeobj::after {
   content: "";
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
@@ -60,7 +76,7 @@
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: rgb(49, 42, 42);
+  background-color: rgb(93, 75, 51);
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
@@ -76,7 +92,7 @@
 
 /* 鼠标悬停时下拉菜单内容链接样式 */
 .dropdown-content a:hover {
-  background-color: #8187db;
+  background-color: rgb(240, 120, 24);
 }
 
 /* 鼠标悬停时显示下拉菜单内容 */