完善：实验一 导航栏 搜索下拉菜单样式

homework1/.vscode/settings.json

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

homework1/index.css

@@ -195,3 +195,32 @@
   text-align: center;
   font-size: 14px;
 }
+
+/* 搜索下拉菜单 */
+#search_form {
+  padding: 0.8em;
+  margin-left: -100px;
+}
+
+#search_form form input {
+  height: 2em;
+  margin-right: 0.5em;
+  border: 1px;
+  border-style: solid;
+  padding-left: 0.5em;
+}
+
+#search_form form button {
+  height: 2em;
+  width: 3em;
+  background: rgb(240, 120, 24);
+  border: 2px;
+  border-style: solid;
+  border-color: rgb(240, 120, 24);
+  color: rgb(255, 255, 255);
+}
+
+#search_form form button:hover {
+  background: rgb(255, 255, 255);
+  color: rgb(240, 120, 24);
+}

homework1/index.html

@@ -46,9 +46,9 @@
           <a href="#" class="dropbtn" id="nav_search_svg"
             ><img src="assets/navbar/search.svg" alt="搜索" class="nav_svg"
           /></a>
-          <div class="dropdown-content">
+          <div class="dropdown-content" id="search_form">
             <form action="#" style="display: flex">
-              <input type="text" />
+              <input type="text" name="search_quest" placeholder="搜索……" />
               <button type="submit">搜索</button>
             </form>
           </div>