From ed02926908246b5d548fa8646084cb360cf34633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=A1=E5=9D=82=E6=98=B4?= <gugugulaocuchen@gmail.com>
Date: Wed, 26 Feb 2025 16:47:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BD=92=E6=A1=A3=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=20=E5=AE=9E=E9=AA=8C=E4=B8=80=20=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 homework1/.vscode/settings.json |  4 +++-
 homework1/index.css             | 18 ++++++++++++++++++
 homework1/index.html            | 24 +++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/homework1/.vscode/settings.json b/homework1/.vscode/settings.json
index 5bf3a53..2ee196d 100644
--- a/homework1/.vscode/settings.json
+++ b/homework1/.vscode/settings.json
@@ -2,6 +2,8 @@
   "liveServer.settings.port": 5543,
   "cSpell.words": [
     "dropbtn",
-    "navobj"
+    "navobj",
+    "regobj",
+    "typeobj"
   ]
 }
diff --git a/homework1/index.css b/homework1/index.css
index 2302a89..4969200 100644
--- a/homework1/index.css
+++ b/homework1/index.css
@@ -19,6 +19,7 @@
 /* 设置导航栏左侧元素边距 */
 #nav_left {
   margin-left: 10%;
+  display: flex;
 }
 
 /* 设置导航栏对象样式*/
@@ -104,3 +105,20 @@
 .dropdown:hover .dropdown-content {
   display: block;
 }
+
+/* 设置导航栏右侧对象右边距 */
+#nav_right {
+  margin-left: auto;
+  margin-right: 10%;
+  display: flex;
+}
+
+/* 设置导航栏图标大小 */
+.nav_svg {
+  width: 1em;
+  height: 1em;
+}
+
+#nav_search_svg {
+  padding: 16px 0;
+}
diff --git a/homework1/index.html b/homework1/index.html
index 631184b..b5c17c2 100644
--- a/homework1/index.html
+++ b/homework1/index.html
@@ -12,7 +12,7 @@
     <!--导航栏-->
     <div id="navbar">
       <!--导航栏左侧对象-->
-      <div id="nav_left" style="display: flex">
+      <div id="nav_left">
         <div class="navobj">
           <a href="#">首页</a>
         </div>
@@ -38,6 +38,28 @@
           <a href="#">登录</a>
         </div>
       </div>
+      <!--导航栏右侧对象-->
+      <div id="nav_right" style="display: flex">
+        <!--搜索按钮-->
+        <div class="navobj dropdown">
+          <!--搜索下拉菜单-->
+          <a href="#" class="dropbtn" id="nav_search_svg"
+            ><img src="assets/navbar/search.svg" alt="搜索" class="nav_svg"
+          /></a>
+          <div class="dropdown-content">
+            <form action="#" style="display: flex">
+              <input type="text" />
+              <button type="submit">搜索</button>
+            </form>
+          </div>
+        </div>
+        <!--购物车按钮-->
+        <div class="navobj">
+          <a href="#">
+            <img src="assets/navbar/cart.svg" alt="购物车" class="nav_svg" />
+          </a>
+        </div>
+      </div>
     </div>
   </body>
 </html>