Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP24
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 1 жил өмнө
parent
e42eecbe3e
commit
a4461e6591
8 өөрчлөгдсөн 280 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 32 0
      7_css3/10_左侧固定右侧自适应.html
  2. 35 0
      7_css3/11_水平垂直居中.html
  3. 32 0
      7_css3/12_水平垂直居中.html
  4. 52 0
      7_css3/13_transform.html
  5. 38 0
      7_css3/14_transform3D.html
  6. 30 0
      7_css3/7_左侧固定 右侧自适应.html
  7. 31 0
      7_css3/8_左侧固定右侧自适应2.html
  8. 30 0
      7_css3/9_左侧固定右侧自适应.html

+ 32 - 0
7_css3/10_左侧固定右侧自适应.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
7_css3/11_水平垂直居中.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;
 
+
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      margin-top: -100px;
 
+      margin-left: -100px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 32 - 0
7_css3/12_水平垂直居中.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;
 
+    }
 
+    html,body{
 
+      height: 100%;
 
+    }
 
+    body{
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 52 - 0
7_css3/13_transform.html
Файл харах 

@@ -0,0 +1,52 @@
 
+<!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;
 
+      border:  1px solid #000;
 
+      margin: 100px auto;
 
+       /* 给父元素添加一个视角 */
 
+      perspective: 800px;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      /* 旋转30° */
 
+      /* transform: rotate(30deg); */
 
+      /* 位移（左右，上下） */
 
+      /* transform: translate(100px,50px); */
 
+      /* 缩放 */
 
+      /* transform: scale(0.5); */
 
+
 
+
 
+      /* transform: rotateX(30deg); */
 
+      /* transform: rotateY(30deg); */
 
+      /* transform: rotateZ(30deg); */
 
+
 
+      /* transform: translateX(50px); */
 
+      /* transform: translateY(50px); */
 
+      /* transform: translateZ(50px); */
 
+
 
+      /* transform: scaleX(0.5); */
 
+      /* transform: scaleY(0.5); */
 
+      transform: scaleZ(0.5);
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+</body>
 
+</html>

+ 38 - 0
7_css3/14_transform3D.html
Файл харах 

@@ -0,0 +1,38 @@
 
+<!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{
 
+      perspective: 800px;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      border: 1px solid #000;
 
+      margin:100px auto;
 
+      transform: rotateY(45deg);
 
+      transform-style: preserve-3d; 
+
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: orange;
 
+      transform: rotateY(45deg);
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+</body>
 
+</html>

+ 30 - 0
7_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>

+ 31 - 0
7_css3/8_左侧固定右侧自适应2.html
Файл харах 

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

+ 30 - 0
7_css3/9_左侧固定右侧自适应.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>