归档：完成 实验一 导航栏

homework1/.vscode/settings.json

@@ -2,6 +2,8 @@
   "liveServer.settings.port": 5543,
   "cSpell.words": [
     "dropbtn",
-    "navobj"
+    "navobj",
+    "regobj",
+    "typeobj"
   ]
 }

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;
+}

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>