Home Explore Help
Sign In
lovecoding
/
VIP28
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 1 year ago
parent
32194bc8ea
commit
b046c59b6a
6 changed files with 185 additions and 0 deletions
Split View Show Diff Stats
  1. 30 0
      css3/6_左侧固定 右侧自适应1.html
  2. 32 0
      css3/6_左侧固定 右侧自适应2.html
  3. 30 0
      css3/6_左侧固定 右侧自适应3.html
  4. 30 0
      css3/6_左侧固定 右侧自适应4.html
  5. 31 0
      css3/7_水平垂直居中.html
  6. 32 0
      css3/8_水平垂直居中2.html

+ 30 - 0
css3/6_左侧固定 右侧自适应1.html
View File 

@@ -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
css3/6_左侧固定 右侧自适应2.html
View File 

@@ -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>

+ 30 - 0
css3/6_左侧固定 右侧自适应3.html
View File 

@@ -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;
 
+      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
css3/6_左侧固定 右侧自适应4.html
View File 

@@ -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>

+ 31 - 0
css3/7_水平垂直居中.html
View File 

@@ -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/8_水平垂直居中2.html
View File 

@@ -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;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>