2 dias atrás · c89e37ed6b
--- a/.DS_Store
+++ b/.DS_Store
--- a/2_CSS/10_行_块_行块元素.html
+++ b/2_CSS/10_行_块_行块元素.html
@@ -28,6 +28,7 @@
 
				         /* 行内块元素 可以设置高度和宽度 */
			
 
				         /* 行内块元素 可以设置上下外边距 */
			
 
				         /* 行内块元素 可以在同一行展示 */
			
 
				+        /* img button input seleclt 等都是行内块元素 */
			
 
				         img{
			
 
				             width: 200px;
			
 
				         }
			
--- a/2_CSS/12_方向属性.html
+++ b/2_CSS/12_方向属性.html
@@ -17,6 +17,8 @@
 
				             /* margin-left: 20px; */
			
 
				             /* 右外边距 */
			
 
				             /* margin-right: 20px; */
			
 
				+
			
 
				+            /* top left right bottom 同样适用于padding */
			
 
				         }
			
 
				     </style>
			
 
				 </head>
			
--- a/2_CSS/13_盒子模型2.html
+++ b/2_CSS/13_盒子模型2.html
@@ -13,11 +13,16 @@
 
				             padding: 20px;
			
 
				         } */
			
 
				 
			
 
				+        /* 盒子模型：标准盒模型 和 怪异盒模型 */
			
 
				+        /* 标准盒模型：实际宽度 = width + padding + border */
			
 
				+        /* 怪异盒模型：实际宽度 = width */
			
 
				+        /* 怪异盒模型 padding 和 border 不会导致元素的宽度和高度增加 */
			
 
				         div{
			
 
				             width: 200px;
			
 
				             height: 200px;
			
 
				             background-color: red;
			
 
				             padding: 20px;
			
 
				+            /* box-sizing 可以切换盒模型的效果 border-box 怪异盒模型 content-box标准盒模型 */
			
 
				             box-sizing: border-box;
			
 
				         }
			
 
				 
			
--- a/2_CSS/15_浮动.html
+++ b/2_CSS/15_浮动.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>
			
 
				+        .item{
			
 
				+            width: 100px;
			
 
				+            height: 100px;
			
 
				+            background-color: red;
			
 
				+
			
 
				+            /* 元素的高度默认会被内容撑开 */
			
 
				+
			
 
				+            /* 如果容器内部元素浮动 容器的高度会消失 ：脱离文档流 */
			
 
				+
			
 
				+            /* 浮动属性可以块元素横向排列 left左浮动 right右浮动 */
			
 
				+            float: left;
			
 
				+
			
 
				+            /* display: inline-block; */
			
 
				+            /* 让元素变为行内块元素 */
			
 
				+            /* 如果行块元素横向排列元素之间会有空隙 这个是空隙是回车符 */
			
 
				+        }
			
 
				+        .box{
			
 
				+            width: 800px;
			
 
				+            /* height: 100px; */
			
 
				+            border:1px dashed black;
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+        /* p{
			
 
				+            /* 清除浮动 */
			
 
				+            /* clear: both; */
			
 
				+        /* }  */
			
 
				+
			
 
				+        /* 伪元素选择器 ::after */
			
 
				+        /* 伪元素选择器可以实现向标签中加入一个虚假的标签 */
			
 
				+        /* 通过伪元素选择器插入的假标签 属于行元素 */
			
 
				+        .box::after{
			
 
				+            /* content 属性 必须要写 他是负责向标签中插入假标签并填写内容的 */
			
 
				+            content:"";
			
 
				+            clear: both;
			
 
				+            display: block;
			
 
				+
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        <div class="item">1</div>
			
 
				+        <div class="item">2</div>
			
 
				+        <div class="item">3</div>
			
 
				+        <!-- <p></p> -->
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/16_伪类_伪元素选择器.html
+++ b/2_CSS/16_伪类_伪元素选择器.html
@@ -0,0 +1,72 @@
 
				+<!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: 200px;
			
 
				+            height: 200px;
			
 
				+            border:2px solid black;
			
 
				+        }
			
 
				+
			
 
				+        /* ::after 伪元素选择器 可以向当前容器的最后边添加标签 */
			
 
				+        .box::after{
			
 
				+            content: "hello world";
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        /* ::before 伪元素选择器 可以向当前容器的最前边添加标签 */
			
 
				+        .box::before{
			
 
				+            content: "你好 世界";
			
 
				+            color: red;
			
 
				+        }
			
 
				+
			
 
				+        /* 伪类选择器 */
			
 
				+        /* 控制选中元素中的第一个 */
			
 
				+        /* li:first-child{
			
 
				+            color: red;
			
 
				+        } */
			
 
				+        /* 控制选中元素中的最后一个 */
			
 
				+        /* li:last-child{
			
 
				+            color: blue;
			
 
				+        } */
			
 
				+        /* 控制选中元素中的第n个 */
			
 
				+        /* nth-child(n) 可以选中第n个元素 */
			
 
				+        /* li:nth-child(3){
			
 
				+            color: green;
			
 
				+        } */
			
 
				+
			
 
				+        /* 选中元素中的 奇数(odd) 偶数(even) 元素 */
			
 
				+        /* li:nth-child(even){
			
 
				+            color: red;
			
 
				+        } */
			
 
				+         /* nth-child(2n)偶数 （2n+1)奇数  n从0开始一直到最后一个元素 */
			
 
				+        li:nth-child(2n){
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        /* :hover 控制鼠标悬停在元素上时的样式 */
			
 
				+        h1:hover{
			
 
				+            color: red;
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        这是一个盒子
			
 
				+    </div>
			
 
				+
			
 
				+    <ul>
			
 
				+        <li>列表项1</li>
			
 
				+        <li>列表项2</li>
			
 
				+        <li>列表项3</li>
			
 
				+        <li>列表项4</li>
			
 
				+        <li>列表项5</li>
			
 
				+        <li>列表项6</li>
			
 
				+        <li>列表项7</li>
			
 
				+    </ul>
			
 
				+
			
 
				+    <h1>hello world</h1>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/4_css盒子模型.html
+++ b/2_CSS/4_css盒子模型.html
@@ -14,7 +14,7 @@
 
				             /* border: 边框宽度 边框样式 边框颜色 */
			
 
				             border:1px solid red;
			
 
				             /* padding 内边距 边框离内部元素的距离 */
			
 
				-            /* padding:10; 上 右 下 左 全都是10像素 */
			
 
				+            /* padding: 10; 上 右 下 左 全都是10像素 */
			
 
				             padding: 10px;
			
 
				             /* margin 外边距 边框离外部元素的距离 */
			
 
				             /* margin:10px; 上 右 下 左 全都是10像素 */
			
--- a/2_CSS/5_文本行高.html
+++ b/2_CSS/5_文本行高.html
@@ -17,6 +17,7 @@
 
				     <!-- <div>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
			
 
				 在本教程中，您将学习如何使用 HTML 来创建站点。</div> -->
			
 
				 
			
 
				+<!-- 实现文本垂直方向居中 其实利用了行高等于高度的特性 因为文本会在它所在的这一个行居中展示 -->
			
 
				 <div>hello world</div>
			
 
				 </body>
			
 
				 </html>
			
--- a/2_CSS/练习5_浮动练习.html
+++ b/2_CSS/练习5_浮动练习.html
@@ -0,0 +1,71 @@
 
				+<!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{
			
 
				+            border:1px solid black;
			
 
				+            margin-bottom: 20px;
			
 
				+        }
			
 
				+        .item1{
			
 
				+            background-color: blue;
			
 
				+
			
 
				+            float: left;
			
 
				+        }
			
 
				+        /* 清除浮动 工具类 */
			
 
				+        .clearfix::after{
			
 
				+            content: "";
			
 
				+            display: block;
			
 
				+            clear: both;
			
 
				+        }
			
 
				+        .item2{
			
 
				+            background-color: red;
			
 
				+            float: right;
			
 
				+        }
			
 
				+        .item{
			
 
				+            width: 100px;
			
 
				+            height: 100px;
			
 
				+            color: white;
			
 
				+            font-size: 50px;
			
 
				+            font-weight: bold;
			
 
				+            margin:10px;
			
 
				+            text-align: center;
			
 
				+            line-height: 100px;
			
 
				+        }
			
 
				+        .item3{
			
 
				+            background-color: green;
			
 
				+            float: left;
			
 
				+        }
			
 
				+        .item4{
			
 
				+            background-color: orange;
			
 
				+            margin:10px auto;
			
 
				+        }
			
 
				+        .item5{
			
 
				+            background-color: green;
			
 
				+            float: right;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 一个标签中可以写多个类名 -->
			
 
				+    <div class="box clearfix">
			
 
				+        <div class="item1 item">1</div>
			
 
				+        <div class="item1 item">2</div>
			
 
				+        <div class="item1 item">3</div>
			
 
				+    </div>
			
 
				+    <div class="box clearfix">
			
 
				+        <div class="item2 item">1</div>
			
 
				+        <div class="item2 item">2</div>
			
 
				+        <div class="item2 item">3</div>
			
 
				+    </div>
			
 
				+    <div class="box">
			
 
				+        <div class="item3 item">左</div>
			
 
				+        <div class="item5 item">右</div>
			
 
				+        <div class="item4 item">中</div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>