归档：完成实验一>导航栏->左侧对象

2025-02-26 11:12:21 +08:00
parent f575b6f05f
commit 566efcf219
3 changed files with 125 additions and 0 deletions
@@ -0,0 +1,7 @@
+{
+  "liveServer.settings.port": 5543,
+  "cSpell.words": [
+    "dropbtn",
+    "navobj"
+  ]
+}
@@ -0,0 +1,85 @@
+/* 这是被index.html引用的css样式表 */
+
+/* 设置全局样式：将所有元素的内边距和外边距初始化为 0 */
+* {
+  padding: 0;
+  margin: 0;
+}
+
+/* 设置导航栏样式 */
+#navbar {
+  background-color: rgb(49, 42, 42);
+  width: 100%;
+  height: 50px;
+  /* 确保导航栏内对象居中 */
+  display: flex;
+  align-items: center;
+}
+
+/* 设置导航栏对象样式*/
+.navobj {
+  color: rgb(255, 255, 255);
+  margin-left: 10px;
+  margin-right: 10px;
+  display: inline-block;
+}
+
+/* 确保导航栏内的链接无蓝字和下划线 */
+.navobj a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* 下拉菜单容器样式 */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* 下拉菜单按钮样式 */
+.dropbtn {
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+/* 为下拉菜单按钮添加三角箭头 */
+.dropbtn::after {
+  content: "";
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid white;
+  margin-left: 5px;
+}
+
+/* 下拉菜单内容样式 */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgb(49, 42, 42);
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* 下拉菜单内容链接样式 */
+.dropdown-content a {
+  color: rgb(255, 255, 255);
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* 鼠标悬停时下拉菜单内容链接样式 */
+.dropdown-content a:hover {
+  background-color: #8187db;
+}
+
+/* 鼠标悬停时显示下拉菜单内容 */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+  <head>
+    <meta charset="UTF-8" />
+    <!--这是index.html-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>用户注册</title>
+    <!--导入样式表-->
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <!--导航栏-->
+    <div id="navbar">
+      <!--导航栏左侧对象-->
+      <div class="navobj">
+        <a href="#">首页</a>
+      </div>
+      <div class="navobj dropdown">
+        <!--商品分类下拉菜单-->
+        <a href="#" class="dropbtn">商品分类</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>
+  </body>
+</html>