صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
VIP24
6
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

new

zsydgithub 1 سال پیش
والد
4b8bd18ecb
کامیت
e42eecbe3e
3فایلهای تغییر یافته به همراه240 افزوده شده و 0 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 85 0
      7_css3/4_奥运五环.html
  2. 89 0
      7_css3/5_弹性盒模型.html
  3. 66 0
      7_css3/6_弹性盒模型的效果.html

+ 85 - 0
7_css3/4_奥运五环.html
مشاهده فایل 

@@ -0,0 +1,85 @@
 
+<!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;
 
+    }
 
+    div{
 
+      width: 200px;
 
+      height: 200px;
 
+      border-radius: 50%;
 
+      border-width: 10px;
 
+      border-style: solid;
 
+      position: absolute;
 
+    }
 
+    #blue{
 
+      border-color: blue;
 
+      left: 0;
 
+      top:0
 
+    }
 
+    div::after{
 
+      content: "";
 
+      position: absolute;
 
+      width: 200px;
 
+      height: 200px;
 
+      border-radius: 50%;
 
+      left: -10px;
 
+      top: -10px;
 
+    }
 
+    #blue::after{
 
+      border: 10px solid blue;
 
+      z-index: 1;
 
+      border-bottom-color: transparent;
 
+    }
 
+    #black{
 
+      border-color: black;
 
+      left: 230px;
 
+      top: 0;
 
+    }
 
+    #black::after{
 
+      border: 10px solid black;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #red{
 
+      border-color: red;
 
+      left: 460px;
 
+      top: 0
 
+    }
 
+    #red::after{
 
+      border: 10px solid red;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #yellow{
 
+      border-color: yellow;
 
+      top: 110px;
 
+      left: 110px;
 
+    }
 
+    #green{
 
+      border-color: green;
 
+      left: 340px;
 
+      top:110px
 
+    }
 
+    #green::after{
 
+      border: 10px solid green;
 
+      z-index: 1;
 
+      border-top-color: transparent;
 
+      border-right-color: transparent;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="blue"></div>
 
+  <div id="black"></div>
 
+  <div id="red"></div>
 
+  <div id="yellow"></div>
 
+  <div id="green"></div>
 
+</body>
 
+</html>

+ 89 - 0
7_css3/5_弹性盒模型.html
مشاهده فایل 

@@ -0,0 +1,89 @@
 
+<!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 {
 
+      background: gray;
 
+      height: 500px;
 
+      display: flex;
 
+    }
 
+
 
+    #div2 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+
 
+    #div3 {
 
+      height: 200px;
 
+      background: blue;
 
+      flex: 1;
 
+    }
 
+
 
+    #div4 {
 
+      height: 200px;
 
+      background: green;
 
+      flex: 3
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+    <div id="div3"></div>
 
+    <div id="div4"></div>
 
+    <!-- 
+
 
+      flex-direction
 
+        flex-wrap
 
+        flex-flow
 
+        justify-content
 
+        align-items
 
+        align-content
 
+
 
+        弹性盒模型
 
+        display:flex
 
+
 
+        flex-direction  决定主轴的方向
 
+          row（默认值）：主轴为水平方向，起点在左端。
 
+          row-reverse：主轴为水平方向，起点在右端。
 
+          column：主轴为垂直方向，起点在上沿。
 
+          column-reverse：主轴为垂直方向，起点在下沿。
 
+
 
+        flex-wrap属性
 
+          nowrap（默认）：不换行
 
+          wrap：换行，第一行在上方
 
+          wrap-reverse：换行，第一行在下方
 
+        
+        justify-content属性
 
+          flex-start（默认值）：左对齐
 
+          flex-end：右对齐
 
+          center： 居中
 
+          space-between：两端对齐，项目之间的间隔都相等。
 
+          space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
 
+        align-items属性
 
+          flex-start：交叉轴的起点对齐。
 
+          flex-end：交叉轴的终点对齐。
 
+          center：交叉轴的中点对齐。
 
+          baseline: 项目的第一行文字的基线对齐。
 
+          stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 
+        align-content属性
 
+        如果项目只有一根轴线，该属性不起作用
 
+          flex-start：与交叉轴的起点对齐。
 
+          flex-end：与交叉轴的终点对齐。
 
+          center：与交叉轴的中点对齐。
 
+          space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
 
+          space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 
+          stretch（默认值）：轴线占满整个交叉轴。
 
+
 
+     -->
 
+  </div>
 
+</body>
 
+
 
+</html>

+ 66 - 0
7_css3/6_弹性盒模型的效果.html
مشاهده فایل 

@@ -0,0 +1,66 @@
 
+<!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;/* 怪异盒模型 */
 
+
 
+      /* 
+      标准盒子模型的内容计算：content=width*height，
 
+      盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
 
+      总宽度等于所有附加值，偏移值的总和；
 
+
 
+      怪异盒子模型的内容计算：content=width*height+padding+border
 
+      盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；
 
+
 
+      box-sizing:content-box; 盒模型设置为w3c标准盒子模型
 
+      box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型
 
+
 
+      */
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <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>
 
+  </ul>
 
+
 
+</body>
 
+
 
+</html>