css实现分类导航

maliangcoder · maliangcoder · commit 0965259d2db3 · 2022-12-24T22:57:22.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/20_分类导航.html b/常用的CSS主流布局案例(1~8)/20_分类导航.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>分类导航</title>
+    <style>
+        body, h3 {
+            margin: 0;
+            padding: 0;
+        }
+
+        .nav {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 12px 0;
+        }
+
+        .nav h3 {
+            flex: 1;
+            margin-right: 16px;
+        }
+
+        .nav span {
+            margin-right: 16px;
+        }
+    </style>
+</head>
+<body>
+<div class="nav">
+    <h3>家用电器</h3>
+    <span>扫地机</span>
+    <span>空气净化机</span>
+    <span>清洁</span>
+    <span>风扇</span>
+</div>
+</body>
+</html>
