前端

2023-09-18 11:21:50 +08:00
parent 8038f02f30
commit 85e41f3ef9
31 changed files with 1802 additions and 30 deletions
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Flex自动排列</title>
+    <style>
+      .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+
+      .item img {
+        width: 400px;
+        height: 300px;
+      }
+
+      .item {
+        margin: 10px;
+        text-align: center;
+      }
+
+      .item img:hover {
+        transform: scale(1.2, 1.2);
+
+        transition: all ease-in 0.2s;
+      }
+
+      img-container {
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="row">
+      <div class="item">
+        <h3>图1</h3>
+        <div class="img-container">
+          <img src="images/01.jpg" />
+        </div>
+      </div>
+
+      <div class="item">
+        <h3>图2</h3>
+        <div class="img-container">
+          <img src="images/02.jpg" />
+        </div>
+      </div>
+
+      <div class="item">
+        <h3>图3</h3>
+        <div class="img-container">
+          <img src="images/03.jpg" />
+        </div>
+      </div>
+
+      <div class="item">
+        <h3>图4</h3>
+        <div class="img-container">
+          <img src="images/04.jpg" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>