首頁 探索 說明
登入
lovecoding
/
VIP22
3
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

new

zsydgithub 2 年之前
父節點
de00c4a8d2
當前提交
db61873668
共有 7 個文件被更改，包括 246 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 30 0
      6_Css3/7_左侧固定 右侧自适应.html
  2. 32 0
      6_Css3/7_左侧固定 右侧自适应2.html
  3. 35 0
      6_Css3/7_左侧固定 右侧自适应3.html
  4. 30 0
      6_Css3/7_左侧固定 右侧自适应4.html
  5. 35 0
      6_Css3/8_水平垂直居中1.html
  6. 34 0
      6_Css3/8_水平垂直居中2.html
  7. 50 0
      6_Css3/9_transform.html

+ 30 - 0
6_Css3/7_左侧固定 右侧自适应.html
查看文件 

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

+ 32 - 0
6_Css3/7_左侧固定 右侧自适应2.html
查看文件 

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

+ 35 - 0
6_Css3/7_左侧固定 右侧自适应3.html
查看文件 

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

+ 30 - 0
6_Css3/7_左侧固定 右侧自适应4.html
查看文件 

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

+ 35 - 0
6_Css3/8_水平垂直居中1.html
查看文件 

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

+ 34 - 0
6_Css3/8_水平垂直居中2.html
查看文件 

@@ -0,0 +1,34 @@
 
+<!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>

+ 50 - 0
6_Css3/9_transform.html
查看文件 

@@ -0,0 +1,50 @@
 
+<!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{
 
+      width: 200px;
 
+      height: 200px;
 
+      border: 1px solid #000;
 
+      margin: 100px auto;
 
+
 
+      /* 给父元素 加一个视角 */
 
+      perspective: 800px;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      /* 指定对象2D rotation 旋转   deg度数 */
 
+      /* transform: rotate(30deg); */
 
+      /* 指定对象2D translation 位移 */
 
+      /* 第一个参数 对应X轴  第二个对应Y轴 */
 
+      /* transform: translate(100px); */
 
+      /* 放大和缩小 */
 
+      /* transform: scale(0.5); */
 
+
 
+      /* 在X轴旋转的角度 */
 
+      /* transform: rotateX(30deg); */
 
+      /* transform: rotateY(30deg); */
 
+      /* transform: rotateZ(30deg); */
 
+
 
+
 
+      /* transform: translateX(100px); */
 
+      /* transform: translateY(100px); */
 
+      /* transform: translateZ(100px); */
 
+
 
+      transform: scaleY(0.5);
 
+      /* transform: scaleZ(0.5); */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+</body>
 
+</html>