Página inicial Explorar Ajuda
Entrar
lovecoding
/
VIP32
10
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

css3

e 1 ano atrás
pai
f15c4da83b
commit
2c9955cc3a
7 arquivos alterados com 281 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 49 0
      css3/10.上中下布局.html
  2. 57 0
      css3/11.上中下布局加左侧定宽.html
  3. 55 0
      css3/12.左侧定宽右侧上中下.html
  4. 29 0
      css3/6.左侧固定右侧自适应1.html
  5. 29 0
      css3/7.左侧固定右侧自适应2.html
  6. 29 0
      css3/8.左侧固定右侧自适应3.html
  7. 33 0
      css3/9.左侧固定右侧自适应4.html

+ 49 - 0
css3/10.上中下布局.html
Ver arquivo 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 100%;
 
+            /* height: 800px; */
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            /* flex: 1; */
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 8;
 
+            background-color: #ff0;
 
+        }
 
+        /* #main .item {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #000;
 
+        } */
 
+        #footer {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">1</div>
 
+        <div id="main">
 
+            <div class="item">内容</div>
 
+            <div class="item">内容</div>
 
+            <div class="item">内容</div>
 
+            <div class="item">内容</div>
 
+        </div>
 
+        <div id="footer">3</div>
 
+    </div>
 
+</body>
 
+</html>

+ 57 - 0
css3/11.上中下布局加左侧定宽.html
Ver arquivo 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box {
 
+            width: 100%;
 
+            height: 800px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #f00;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 8;
 
+            background: #ff0;
 
+            display: flex;
 
+        }
 
+        #main #sideBar {
 
+            width: 200px;
 
+            height: 100%;
 
+            background: aqua;
 
+        }
 
+        #main #article{
 
+            flex: 1;
 
+            height: 100%;
 
+            margin-left: 10px;
 
+            background: plum;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">header</div>
 
+        <div id="main">
 
+            <div id="sideBar">sideBar</div>
 
+            <div id="article">article</div>
 
+        </div>
 
+        <div id="footer">footer</div>
 
+    </div>
 
+</body>
 
+</html>

+ 55 - 0
css3/12.左侧定宽右侧上中下.html
Ver arquivo 

@@ -0,0 +1,55 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box {
 
+            display: flex;
 
+            height: 800px;
 
+        }
 
+        #sideBar {
 
+            width: 300px;
 
+            height: 100%;
 
+            background: #ff0;
 
+        }
 
+        #content {
 
+            flex: 1;
 
+            height: 100%;
 
+            background: #f00;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #content #header {
 
+            height: 100px;
 
+            width: 100%;
 
+            background: #0f0;
 
+        }
 
+        #content #main {
 
+            flex: 5;
 
+            width: 100%;
 
+            background: #f0f;
 
+        }
 
+        #content #footer {
 
+            flex: 2;
 
+            width: 100%;
 
+            background: rgb(227, 151, 20);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="sideBar">sideBar</div>
 
+        <div id="content">
 
+            <div id="header">header</div>
 
+            <div id="main">main</div>
 
+            <div id="footer">footer</div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 29 - 0
css3/6.左侧固定右侧自适应1.html
Ver arquivo 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <style>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+      }
 
+      .box1 {
 
+        width: 200px;
 
+        height: 200px;
 
+        background: #00f;
 
+      }
 
+      .box2 {
 
+        height: 300px;
 
+        background: #f00;
 
+        margin-left: 200px;
 
+        margin-top: -200px;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+  </body>
 
+</html>

+ 29 - 0
css3/7.左侧固定右侧自适应2.html
Ver arquivo 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            position: absolute;
 
+        }
 
+        .box2 {
 
+            height: 200px;
 
+            background: #f00;
 
+            margin-left: 210px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 29 - 0
css3/8.左侧固定右侧自适应3.html
Ver arquivo 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #ff0;
 
+            float: left;
 
+        }
 
+        .box2 {
 
+            height: 200px;
 
+            background: aqua;
 
+            margin-left: 210px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 33 - 0
css3/9.左侧固定右侧自适应4.html
Ver arquivo 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body {
 
+            display: flex;
 
+        }
 
+        .box1 {
 
+            /* flex: 1; */
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+        }
 
+        .box2 {
 
+            flex: 1;
 
+            height: 200px;
 
+            background: #ff0;
 
+            margin-left: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+   <div class="box1"></div>
 
+   <div class="box2"></div> 
+</body>
 
+</html>