练习

2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
--- a/teaching/lhj/kejian/pubuliu.html
+++ b/teaching/lhj/kejian/pubuliu.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .waterfall {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            /* grid-gap: 0.25em; */
+            grid-auto-flow: row dense;
+            grid-auto-rows: 20px;
+
+
+            /* grid-template-columns: repeat(2, 1fr);  // 指定两列，自动宽度
+            grid-gap: 0.25em; // 横向，纵向间隔
+            grid-auto-flow: row dense;  // 是否自动补齐空白
+            grid-auto-rows: 20px;  // base高度，grid-row基于此运算 */
+        }
+
+        .waterfall .item {
+            width: 100%;
+            background: #222;
+            color: white;
+            border: 1px solid white;
+        }
+
+        .waterfall .item:nth-of-type(3n+1) {
+            /* 1,4,7,10 ... */
+            grid-row: auto / span 1;
+        }
+        .waterfall .item:nth-of-type(3n+2) {
+            /* 2,8,11,15 */
+            grid-row: auto / span 9;
+        }
+
+        .waterfall .item:nth-of-type(3n+3) {
+            /* 3,6,14,15 */
+            grid-row: auto / span 4;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="waterfall">
+        <div class="item">1</div>
+        <div class="item">2</div>
+        <div class="item">3</div>
+        <div class="item">4</div>
+        <div class="item">5</div>
+        <div class="item">6</div>
+    </div>
+</body>
+
+</html>