Página Principal Explorar Ajuda
Iniciar Sessão
lovecoding
/
W250913
10
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

admin

fengchuanyu há 13 horas atrás
pai
95e8a5b4c9
commit
55a2424a6c
2 ficheiros alterados com 183 adições e 0 exclusões
Visão Unificada Mostrar Estatísticas Diff
  1. 106 0
      5_CSS3/练习4_骰子.html
  2. 77 0
      5_CSS3/练习5_垂直水平居中.html

+ 106 - 0
5_CSS3/练习4_骰子.html
Ver Ficheiro 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -25,11 +26,116 @@
 
             background-color: #333;
 
             background-color: #333;
 
             box-shadow: inset 0 3px #111, inset 0 -3px #555;
 
             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:last-child {
 
+            align-self: flex-end;
 
+        }
 
+
 
+        .face4 {
 
+            display: flex;
 
+            flex-direction: column;
 
+            justify-content: space-between;
 
+        }
 
+        .face4 .column{
 
+            display: flex;
 
+            justify-content: space-between;
 
+        }
 
+
 
+        .face5{
 
+            display: flex;
 
+            flex-direction: column;
 
+            justify-content: space-between;
 
+        }
 
+        .face5 .column{
 
+            display: flex;
 
+            justify-content: space-between;
 
+        }
 
+        .face5 .column:nth-child(2){
 
+            justify-content: center;
 
+        }
 
+        .face6{
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            flex-direction: column;
 
+            align-content: space-between;
 
+            justify-content: space-between;
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <div class="face face1">
 
     <div class="face face1">
 
         <span></span>
 
         <span></span>
 
     </div>
 
     </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="column">
 
+            <span></span>
 
+            <span></span>
 
+        </div>
 
+        <div class="column">
 
+            <span></span>
 
+            <span></span>
 
+        </div>
 
+    </div>
 
+
 
+    <div class="face face5">
 
+        <div class="column">
 
+            <span></span>
 
+            <span></span>
 
+        </div>
 
+        <div class="column">
 
+            <span></span>
 
+        </div>
 
+        <div class="column">
 
+            <span></span>
 
+            <span></span>
 
+        </div>
 
+    </div>
 
+
 
+    <div class="face face6">
 
+        <span></span>
 
+        <span></span>
 
+        <span></span>
 
+        <span></span>
 
+        <span></span>
 
+        <span></span>
 
+    </div>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 77 - 0
5_CSS3/练习5_垂直水平居中.html
Ver Ficheiro 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 2px dashed black;
 
+        }
 
+        .align0{
 
+            text-align: center;
 
+            line-height: 200px;
 
+        }
 
+        .box1{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+        }
 
+        .align1{
 
+            position: relative;
 
+        }
 
+        .box1{
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            margin-top: -50px;
 
+            margin-left: -50px;
 
+        }
 
+        .align2{
 
+            position: relative;
 
+        }
 
+        .box2{
 
+            width: 80px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%,-50%);
 
+        }
 
+
 
+        .align3{
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+        .box3{
 
+            width: 80px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 单行文本 -->
 
+     <div class="box align0">
 
+        hello
 
+     </div>
 
+     <!-- 块元素 已知大小 -->
 
+    <div class="box align1">
 
+        <div class="box1"></div>
 
+    </div>
 
+
 
+    <!-- 未知大小 -->
 
+     <div class="box align2">
 
+        <div class="box2">
 
+            hello
 
+        </div>
 
+     </div>
 
+     <div class="box align3">
 
+        <div class="box3">
 
+            hello
 
+        </div>
 
+     </div>
 
+</body>
 
+</html>