首頁 探索 說明
登入
lovecoding
/
web0715
10
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

add

fengchuanyu 8 月之前
父節點
bc29495720
當前提交
5caff078df
共有 3 個文件被更改，包括 79 次插入 和 3 次删除
分割檢視 顯示文件統計
  1. 25 3
      6_css3/7_flex.html
  2. 16 0
      6_css3/练习题4_垂直水平居中.html
  3. 38 0
      6_css3/练习题5_骰子.html

+ 25 - 3
6_css3/7_flex.html
查看文件 

@@ -26,11 +26,14 @@
 
 
             /* flex-direction: row-reverse; */
 
 
-            /* align-items: stretch; */
 
+            /* align-items: center; */
 
+            /* flex-wrap: wrap;
 
+            align-content: flex-end; */
 
         }
 
         li{
 
             list-style: none;
 
-            width: 100px;
 
+            /* width: 100px; */
 
+            flex-basis: 100px;
 
             height: 100px;
 
             background-color: orangered;
 
             margin: 10px;
 
@@ -38,8 +41,14 @@
 
             color: #fff;
 
             text-align: center;
 
             line-height: 100px;
 
+            /* flex-grow: 1; */
 
         }
 
-       
+       li:nth-child(3){
 
+        /* order: -1; */
 
+        /* flex-grow: 1; */
 
+        /* flex-shrink: 0; */
 
+        align-self: flex-end;
 
+       }
 
     </style>
 
 </head>
 
 <body>
 
@@ -51,6 +60,19 @@
 
         <li>4</li>
 
         <li>5</li>
 
         <li>6</li>
 
+        <!-- <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+        <li>5</li>
 
+        <li>6</li>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+        <li>5</li>
 
+        <li>6</li> -->
 
+        
     </ul>
 
 </body>
 
 </html>

+ 16 - 0
6_css3/练习题4_垂直水平居中.html
查看文件 

@@ -12,15 +12,31 @@
 
             float: left;
 
             margin-left: 50px;
 
             margin-top: 50px;
 
+            text-align: center;
 
+            line-height: 400px;
 
+            /* position: relative; */
 
+            /* display: flex;
 
+            justify-content: center;
 
+            align-items: center; */
 
         }
 
         .div1{
 
             width: 100px;
 
             height: 100px;
 
             background-color: red;
 
+            /* position: absolute;
 
+            top: 50%;
 
+            left: 50%; */
 
+            /* margin-top: -50px;
 
+            margin-left: -50px; */
 
+            /* transform: translate(-50%,-50%); */
 
         }
 
         span{
 
             background-color: red;
 
             color: #fff;
 
+            /* position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%,-50%); */
 
         }
 
     </style>
 
 </head>

+ 38 - 0
6_css3/练习题5_骰子.html
查看文件 

@@ -0,0 +1,38 @@
 
+<!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>
 
+        .face {
 
+            float: left;
 
+            margin: 16px;
 
+            padding: 4px;
 
+            background-color: #e7e7e7;
 
+            width: 104px;
 
+            height: 104px;
 
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
 
+            border-radius: 10%;
 
+        }
 
+
 
+        .face span {
 
+            display: block;
 
+            width: 24px;
 
+            height: 24px;
 
+            border-radius: 50%;
 
+            margin: 4px;
 
+            background-color: #333;
 
+            box-shadow: inset 0 3px #111, inset 0 -3px #555;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="face face1">
 
+        <span></span>
 
+    </div>
 
+</body>
 
+
 
+</html>