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

fix:day16

e 1 year ago
parent
61e67d1ce9
commit
07768ebb06
9 changed files with 329 additions and 0 deletions
Split View Show Diff Stats
  1. 28 0
      day16/css/7.盒模型.css
  2. 29 0
      day16/html/10.左侧固定 右侧自适应3.html
  3. 31 0
      day16/html/11.左侧固定 右侧自适应4.html
  4. 46 0
      day16/html/12.上中下布局.html
  5. 54 0
      day16/html/13.上中下布局左侧定宽.html
  6. 55 0
      day16/html/14.左侧固定 右侧上中下.html
  7. 28 0
      day16/html/7.盒模型.html
  8. 29 0
      day16/html/8.左侧固定 右侧自适应1.html
  9. 29 0
      day16/html/9.左侧固定 右侧自适应2.html

+ 28 - 0
day16/css/7.盒模型.css
View File 

@@ -0,0 +1,28 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+ul {
 
+    display: flex;
 
+    list-style: none;
 
+    flex-wrap: wrap;
 
+}
 
+li {
 
+    width: 20%;
 
+    height: 100px;
 
+    background: #f00;
 
+    border: 1px solid #ff0;
 
+    padding: 10px;
 
+    margin: 10px;
 
+    box-sizing: content-box;
 
+}
 
+/* 
+    盒模型：
 
+
 
+        （W3c万维网）标准盒模型:box-sizing:content-box
 
+        内容计算：content = width(height)
 
+        盒子的总宽度：content + padding + border +margin
 
+        (IE盒模型)怪异盒模型:box-sizing:border-box;
 
+        内容计算：content = width(height) + padding + border  
+        盒子的总宽度：content + margin   
+*/

+ 29 - 0
day16/html/10.左侧固定 右侧自适应3.html
View File 

@@ -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: 200px;
 
+            background: #0f0;
 
+            margin-left: 220px;
 
+            margin-top: -200px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 31 - 0
day16/html/11.左侧固定 右侧自适应4.html
View File 

@@ -0,0 +1,31 @@
 
+<!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 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+        #box2 {
 
+            height: 200px;
 
+            background: #00f;
 
+            flex: 1;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 46 - 0
day16/html/12.上中下布局.html
View File 

@@ -0,0 +1,46 @@
 
+<!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;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            flex: 1;
 
+            background: #00f;
 
+        }
 
+        /* #header .nav {
 
+            height: 200px;
 
+            background: #ff0;
 
+        } */
 
+        #main {
 
+            flex: 4;
 
+            background: #0f0;
 
+        }
 
+        #footer {
 
+            flex: 1;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 主体给宽不给高
 
+        高度我们让内容去撑
 
+    -->
 
+    <div id="box">
 
+        <div id="header">
 
+            <div class="nav">导航</div>
 
+        </div>
 
+        <div id="main">主体</div>
 
+        <div id="footer">页尾</div>
 
+    </div>
 
+</body>
 
+</html>

+ 54 - 0
day16/html/13.上中下布局左侧定宽.html
View File 

@@ -0,0 +1,54 @@
 
+<!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: 900px;
 
+            height: 800px;
 
+            background: #eee;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            flex: 2;
 
+            background: #f00;
 
+        }
 
+        #content {
 
+            flex: 4;
 
+            background: #ff0;
 
+            display: flex;
 
+        }
 
+        #content #sideBar {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+        }
 
+        #content #main {
 
+            flex: 1;
 
+            background: pink;
 
+            margin-left: 10px;
 
+        }
 
+        #footer {
 
+            flex: 2;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">页眉</div>
 
+        <div id="content">
 
+            <div id="sideBar">1</div>
 
+            <div id="main">2</div>
 
+        </div>
 
+        <div id="footer">页尾</div>
 
+    </div>
 
+</body>
 
+</html>

+ 55 - 0
day16/html/14.左侧固定 右侧上中下.html
View File 

@@ -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 {
 
+            width: 800px;
 
+            height: 800px;
 
+            background: #eee;
 
+            display: flex;
 
+        }
 
+
 
+        #sideBar {
 
+            width: 300px;
 
+            height: 100%;
 
+            background: #0f0;
 
+        }
 
+        #right {
 
+            flex: 1;
 
+            background: #00f;
 
+            margin-left: 10px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #right #header {
 
+            flex: 1;
 
+            background: #f00;
 
+        }
 
+        #right #content {
 
+            flex: 4;
 
+            background: #ff0;
 
+        }
 
+        #right #footer {
 
+            flex: 1;
 
+            background: pink;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="sideBar"></div>
 
+        <div id="right">
 
+            <div id="header"></div>
 
+            <div id="content"></div>
 
+            <div id="footer"></div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 28 - 0
day16/html/7.盒模型.html
View File 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/7.盒模型.css">
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 29 - 0
day16/html/8.左侧固定 右侧自适应1.html
View File 

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

+ 29 - 0
day16/html/9.左侧固定 右侧自适应2.html
View File 

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