9 月之前 · 648a5e8235
--- a/1_html/3_行块元素.html
+++ b/1_html/3_行块元素.html
@@ -0,0 +1,16 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 多个标签在一行内展示 称为行元素 -->
			
 
				+    <span>hello</span>
			
 
				+    <span>world</span>
			
 
				+    <!-- 多个标签换行展示  称为块元素-->
			
 
				+    <div>世界</div>
			
 
				+    <div>你好</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/1_css.html
+++ b/2_css/1_css.html
@@ -0,0 +1,16 @@
 
				+<!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>
			
 
				+        div{
			
 
				+            color: red;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div>hello world!</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/2_选择器.html
+++ b/2_css/2_选择器.html
@@ -0,0 +1,27 @@
 
				+<!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>
			
 
				+        /* div{
			
 
				+            color: red;
			
 
				+        } */
			
 
				+        /* 以"."开头的选择器称为类选择器 */
			
 
				+        /* .div1{
			
 
				+            color: red;
			
 
				+        } */
			
 
				+         /* 以#开头的选择器为ID选择器 且是唯一的 */
			
 
				+        #divid{
			
 
				+            color: red;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="div1" id="divid">hello</div>
			
 
				+    <div>world</div>
			
 
				+    <div class="div1">你好</div>
			
 
				+    <div style="color:blue">世界</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/3_属性选择器.html
+++ b/2_css/3_属性选择器.html
@@ -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>
			
 
				+        /* .a{
			
 
				+            color: red;
			
 
				+        }
			
 
				+        .b{
			
 
				+            font-size:40px ;
			
 
				+        } */
			
 
				+        /* li[class]{
			
 
				+            color: red;
			
 
				+        } */
			
 
				+        /* li[class=a]{
			
 
				+            color: red;
			
 
				+        } */
			
 
				+        li[class~=a]{
			
 
				+            color: red;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <ul>
			
 
				+        <li class="a">hello</li>
			
 
				+        <li class="ab">world</li>
			
 
				+        <li class="b a">你好</li>
			
 
				+        <li>世界</li>
			
 
				+    </ul>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/4_类选择器.html
+++ b/2_css/4_类选择器.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>
			
 
				+    <style>
			
 
				+        /* 伪类选择器 */
			
 
				+        li:first-child{
			
 
				+            color: red;
			
 
				+        }
			
 
				+        li:last-child{
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        li:nth-child(3){
			
 
				+            color: yellow;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <ul>
			
 
				+        <li>hello</li>
			
 
				+        <li>world</li>
			
 
				+        <li>你好</li>
			
 
				+        <li>世界</li>
			
 
				+    </ul>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/5_伪元素选择器.html
+++ b/2_css/5_伪元素选择器.html
@@ -0,0 +1,26 @@
 
				+<!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>
			
 
				+        /* 伪元素选择器 */
			
 
				+        div::after{
			
 
				+            content: "lovecoding";
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        div::before{
			
 
				+            content: "web";
			
 
				+            color: red;
			
 
				+        }
			
 
				+        /* 伪类选择器 */
			
 
				+        div:hover{
			
 
				+            color: yellow;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div>1</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_css/6_层叠样式.html
+++ b/2_css/6_层叠样式.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>
			
 
				+        .div1{
			
 
				+            color: red;
			
 
				+            font-size: 40px;
			
 
				+        }
			
 
				+        .div2{
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        .div3{
			
 
				+            color: yellow;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="div1">
			
 
				+        hello
			
 
				+        <div class="div2">
			
 
				+            world
			
 
				+            <div class="div3">你好</div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>