fengchuanyu 3 months ago
parent
commit
45832a5531
2 changed files with 172 additions and 3 deletions
  1. 109 3
      8_CSS3/练习题4_骰子.html
  2. 63 0
      9_HTML5/1_HTML5表单元素.html

+ 109 - 3
8_CSS3/练习题4_骰子.html

@@ -27,16 +27,122 @@
             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 {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .face4 .row{
+            display: flex;
+            justify-content: space-between;
+        }
+        .face5{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .face5 .row{
+            display: flex;
+            justify-content: space-between;
+        }
+        .face5 .row:nth-child(2){
+            justify-content: center;
+        }
+
+        .face6{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .face6 .row{
+            display: flex;
+            justify-content: space-between;
+        }
     </style>
 </head>
 
 <body>
-    <div class="face">
+    <div class="face face1">
+        <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="row">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+
+    <div class="face face5">
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="row">
+            <span></span>
+        </div>
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <div class="face face6">
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="row">
+            <span></span>
+            <span></span>
+        </div>
+    </div>
 </body>
 
 </html>

+ 63 - 0
9_HTML5/1_HTML5表单元素.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <form action="xxx.php">
+        <input type="text" id="inp1" value="hello" name="username" placeholder="请输入用户名" autofocus>
+        <input type="password">
+        <input type="date" name="dateinp">
+        <input type="color" name="colorinp">
+        <input type="range" name="rangeinp" max="100" min="0" step="10">
+
+        <input type="checkbox" name="checkboxinp">篮球
+        <input type="checkbox" name="checkboxinp">足球
+        <input type="checkbox" name="checkboxinp">乒乓球
+
+        <input type="radio" name="radioinp">男
+        <input type="radio" name="radioinp">女
+
+        <select name="selectinp">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+        </select>
+
+        <textarea name="textareainp" cols="30" rows="10"></textarea>
+
+        <input type="file" name="fileinp">
+
+        <input type="email" name="emailinp">
+        <input type="url" name="urlinp">
+
+        <input list="listinp">
+        <datalist id="listinp">
+            <option value="1"></option>
+            <option value="2"></option>
+            <option value="3"></option>
+        </datalist>
+
+        <input type="button" onclick="getVal()" value="input按钮">
+        <button type="submit">button按钮</button>
+    </form>
+
+    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
+        <input type="number" value="1" step="10" id="a">
+        <input type="number" value="1" id="b">
+        <output name="x" for="a b"></output>
+    </form>
+
+    <script>
+        function getVal() {
+            var inp1 = document.getElementById("inp1");
+            console.log(inp1.value);
+        }
+    </script>
+</body>
+
+</html>