Domů Procházet Nápověda
Přihlásit se
lovecoding
/
VIP30
9
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

new

zsydgithub před 1 rokem
rodič
e1c3373cde
revize
0dcd461943
8 změnil soubory, kde provedl 339 přidání a 0 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 73 0
      CSS3/4_flex布局.html
  2. 81 0
      CSS3/5_弹性盒模型.html
  3. 30 0
      CSS3/6_左侧固定 右侧自适应.html
  4. 30 0
      CSS3/6_左侧固定 右侧自适应2.html
  5. 30 0
      CSS3/6_左侧固定 右侧自适应3.html
  6. 32 0
      CSS3/6_左侧固定 右侧自适应4.html
  7. 31 0
      CSS3/7_水平垂直居中.html
  8. 32 0
      CSS3/7_水平垂直居中2.html

+ 73 - 0
CSS3/4_flex布局.html
Zobrazit soubor 

@@ -0,0 +1,73 @@
 
+<!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>
 
+    #div1{
 
+      height: 500px;
 
+      background: rgba(0,0,0,0.5);
 
+      display: flex;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div3{
 
+      height: 200px;
 
+      background: blue;
 
+      /* 占据剩余空间的一份 */
 
+      flex: 1;
 
+    }
 
+    #div4{
 
+      height: 200px;
 
+      background: orange;
 
+      flex: 2;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+    <div id="div3"></div>
 
+    <div id="div4"></div>
 
+    <!-- 
+      flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
 
+        row	默认值。作为一行，水平地显示弹性项目。
 
+        row-reverse	等同行，但方向相反。
 
+        column	作为列，垂直地显示弹性项目。
 
+        column-reverse	等同列，但方向相反。
 
+
 
+      flex-wrap 属性规定是否应该对 flex 项目换行。
 
+        nowrap	默认值。规定弹性项目不会换行。
 
+        wrap	规定弹性项目会在需要时换行。
 
+        wrap-reverse	规定弹性项目会在需要时换行，以反方向。
 
+
 
+      justify-content 属性用于对齐 flex 项目：
 
+        flex-start	默认值。项目位于容器的开头。
 
+        flex-end	项目位于容器的结尾。
 
+        center	项目位于容器中央。
 
+        space-between	项目在行与行之间留有间隔。
 
+        space-around	项目在行之前、行之间和行之后留有空间。
 
+
 
+      align-items 属性用于垂直对齐 flex 项目。
 
+        stretch	默认。项目被拉伸以适合容器。
 
+        center	项目位于容器的中央。
 
+        flex-start	项目位于容器的开头。
 
+        flex-end	项目位于容器的末端。
 
+        baseline	项目被定位到容器的基线。
 
+
 
+      align-content 属性用于对齐弹性线。
 
+        stretch	默认值。行拉伸以占据剩余空间。
 
+        center	朝着弹性容器的中央对行打包。
 
+        flex-start	朝着弹性容器的开头对行打包。
 
+        flex-end	朝着弹性容器的结尾对行打包。
 
+        space-between	行均匀分布在弹性容器中。
 
+        space-around	行均匀分布在弹性容器中，两端各占一半。
 
+    -->
 
+  </div>
 
+</body>
 
+</html>

+ 81 - 0
CSS3/5_弹性盒模型.html
Zobrazit soubor 

@@ -0,0 +1,81 @@
 
+<!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;
 
+    }
 
+    ul{
 
+      list-style: none;
 
+      display: flex;
 
+      flex-wrap: wrap;
 
+    }
 
+    li{
 
+      width: 20%;
 
+      height: 100px;
 
+      background: red;
 
+      border: 1px solid green;
 
+      box-sizing: border-box;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <!-- 
+    标准盒子的宽度 = width + padding + margin + border
 
+    怪异盒模型的宽度 = width + margin   
+    width = content + padding + border
 
+
 
+
 
+    box-sizing: boder-box   怪异盒模型(ie盒模型)
 
+    box-sizing: content-box 标准盒模型
 
+
 
+  -->
 
+  <ul>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+  </ul>
 
+</body>
 
+</html>

+ 30 - 0
CSS3/6_左侧固定 右侧自适应.html
Zobrazit soubor 

@@ -0,0 +1,30 @@
 
+<!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;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: green;
 
+      float: left;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: red;
 
+      margin-left: 210px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 30 - 0
CSS3/6_左侧固定 右侧自适应2.html
Zobrazit soubor 

@@ -0,0 +1,30 @@
 
+<!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;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: green;
 
+      position: absolute;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: red;
 
+      margin-left: 210px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 30 - 0
CSS3/6_左侧固定 右侧自适应3.html
Zobrazit soubor 

@@ -0,0 +1,30 @@
 
+<!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;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: green;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: red;
 
+      margin-left: 210px;
 
+      margin-top: -200px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 32 - 0
CSS3/6_左侧固定 右侧自适应4.html
Zobrazit soubor 

@@ -0,0 +1,32 @@
 
+<!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;
 
+    }
 
+    body{
 
+      display: flex;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: green;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: red;
 
+      flex: 1;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 31 - 0
CSS3/7_水平垂直居中.html
Zobrazit soubor 

@@ -0,0 +1,31 @@
 
+<!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;
 
+    }
 
+    body{
 
+      background: #ccc;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      position: absolute;
 
+      left: 50%;
 
+      top: 50%;
 
+      margin-left: -100px;
 
+      margin-top: -100px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 32 - 0
CSS3/7_水平垂直居中2.html
Zobrazit soubor 

@@ -0,0 +1,32 @@
 
+<!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;
 
+    }
 
+    html,body{
 
+      height: 100%;
 
+    }
 
+    body{
 
+      background: #ccc;
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>