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

homework1/README.MD

@@ -0,0 +1,23 @@
+# 实验一 网页开发基础
+
+## 实验目标
+
+开发一个这样的网页
+
+![image-20250226153311043](README.assets/image-20250226153311043.png)
+
+## 项目结构
+
+```bash
+.
+├── assets	# 存放网页资源文件
+│   └── navbar	# 导航栏的资源文件
+│       ├── cart.svg	# 购物车图标的矢量图
+│       └── search.svg	# 搜索图标的矢量图
+├── index.css
+├── index.html
+├── README.assets	# README.md中的资源文件
+│   └── image-20250226153311043.png
+└── README.MD
+```
+

homework1/assets/navbar/cart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740541121377" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5487" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M725.333333 768c-47.36 0-85.333333 37.973333-85.333333 85.333333 0 46.933333 38.4 85.333333 85.333333 85.333334s85.333333-38.4 85.333334-85.333334a85.333333 85.333333 0 0 0-85.333334-85.333333M42.666667 85.333333v85.333334h85.333333l153.6 323.84-58.026667 104.533333A85.589333 85.589333 0 0 0 298.666667 725.333333h512v-85.333333H316.586667c-5.973333 0-10.666667-4.693333-10.666667-10.666667 0-2.133333 0.426667-3.84 1.28-5.12L345.6 554.666667h317.866667c32 0 60.16-17.92 74.666666-43.946667l152.746667-276.053333c2.986667-6.826667 5.12-14.08 5.12-21.333334 0-23.466667-19.2-42.666667-42.666667-42.666666H222.293333l-40.106666-85.333334M298.666667 768c-47.36 0-85.333333 37.973333-85.333334 85.333333 0 46.933333 38.4 85.333333 85.333334 85.333334s85.333333-38.4 85.333333-85.333334a85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="5488" fill="#ffffff"></path></svg>

homework1/assets/navbar/search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740539964798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1467" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M416 32c212.064 0 384 171.936 384 384 0 86.4-28.544 166.176-76.736 230.368l254.304 254.304-90.528 90.496-256.576-256.608A382.208 382.208 0 0 1 416 800C203.936 800 32 628.064 32 416S203.936 32 416 32z m0 128a256 256 0 1 0 0 512 256 256 0 0 0 0-512z" fill="#ffffff" p-id="1468"></path></svg>

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);
 }
 
 /* 鼠标悬停时显示下拉菜单内容 */

homework1/index.html

@@ -12,22 +12,32 @@
     <!--导航栏-->
     <div id="navbar">
       <!--导航栏左侧对象-->
+      <div id="nav_left" style="display: flex">
         <div class="navobj">
           <a href="#">首页</a>
         </div>
         <div class="navobj dropdown">
           <!--商品分类下拉菜单-->
-        <a href="#" class="dropbtn">商品分类</a>
+          <a href="#" class="dropbtn" id="navbar_typeobj">商品分类</a>
           <div class="dropdown-content">
             <a href="#">分类1</a>
             <a href="#">分类2</a>
             <a href="#">分类3</a>
           </div>
         </div>
-      <div class="navobj"><a href="#">热销</a></div>
-      <div class="navobj"><a href="#">新品</a></div>
-      <div class="navobj"><a href="#">注册</a></div>
-      <div class="navobj"><a href="#">登录</a></div>
+        <div class="navobj">
+          <a href="#">热销</a>
+        </div>
+        <div class="navobj">
+          <a href="#">新品</a>
+        </div>
+        <div class="navobj" id="navbar_regobj">
+          <a href="#">注册</a>
+        </div>
+        <div class="navobj">
+          <a href="#">登录</a>
+        </div>
+      </div>
     </div>
   </body>
 </html>