admin

5_CSS3/练习题4_骰子.html

@@ -26,6 +26,54 @@
             background-color: #333;
             box-shadow: inset 0 3px #111, inset 0 -3px #555;
         }
+
+        .face1 {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .face2 {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .face2 span:nth-child(2) {
+            align-self: flex-end;
+        }
+
+        .face3 {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .face3 span:nth-child(2) {
+            align-self: center;
+        }
+
+        .face3 span:nth-child(3) {
+            align-self: flex-end;
+        }
+        .face4,.face5{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .face4 .item,.face5 .item{
+            display: flex;
+            justify-content: space-between;
+        }
+        .face5 .item:nth-child(2){
+            justify-content: center;
+        }
+
+        .face6{
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            justify-content: space-between;
+            align-content: space-between;
+        }
     </style>
 </head>
 
@@ -34,7 +82,51 @@
         <span></span>
     </div>
 
-  
+    <div class="face face2">
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="face face3">
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="face face4">
+        <div class="item">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="item">
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+
+    <div class="face face5">
+        <div class="item">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="item">
+            <span></span>
+        </div>
+        <div class="item">
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+
+    <div class="face face6">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
 </body>
 
 </html>