1 ano atrás · 07768ebb06
--- a/day16/css/7.盒模型.css
+++ b/day16/css/7.盒模型.css
@@ -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   
			
 
				+*/
			
--- a/day16/html/10.左侧固定右侧自适应3.html
+++ b/day16/html/10.左侧固定右侧自适应3.html
@@ -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>
			
--- a/day16/html/11.左侧固定右侧自适应4.html
+++ b/day16/html/11.左侧固定右侧自适应4.html
@@ -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>
			
--- a/day16/html/12.上中下布局.html
+++ b/day16/html/12.上中下布局.html
@@ -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>
			
--- a/day16/html/13.上中下布局左侧定宽.html
+++ b/day16/html/13.上中下布局左侧定宽.html
@@ -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>
			
--- a/day16/html/14.左侧固定右侧上中下.html
+++ b/day16/html/14.左侧固定右侧上中下.html
@@ -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>
			
--- a/day16/html/7.盒模型.html
+++ b/day16/html/7.盒模型.html
@@ -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>
			
--- a/day16/html/8.左侧固定右侧自适应1.html
+++ b/day16/html/8.左侧固定右侧自适应1.html
@@ -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>
			
--- a/day16/html/9.左侧固定右侧自适应2.html
+++ b/day16/html/9.左侧固定右侧自适应2.html
@@ -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>