调整

liuwenai · liuwenai · commit e6ed292dcbce · 2020-04-17T17:28:06.000+08:00
diff --git a/README.md b/README.md
@@ -270,6 +270,20 @@ HTML **超文本标记语言**
     ....
 
     #### ID选择器：规定用`#`来定义
-
-    
+    #### 类选择器：规定用`.`来定义
+     **类上样式，id上行为**
+
+
+     CSS画三角形
+
+     ```css
+     .div1 {
+            width: 0;
+            height: 0;
+            border-top: 30px solid red;
+            /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
+            border-left: 30px solid transparent;
+            border-right: 20px solid transparent;
+        }
+     ```
 
diff --git a/background.html b/background.html
@@ -1,84 +1,39 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-    <style>
-        div {
-            width: 500px;
-            height: 100px;
-            margin: 10px auto;
-            border: 1px solid #000;
-        }
+<!doctype html>
+<html lang="en">
 
-        /* 语法：
-            linear-gradient(方向，起始颜色，终止颜色);
-            方向：to left   to right  to top   to bottom 　角度　30deg
-            起始颜色
-            终止颜色
-        */
-        div:nth-child(1) {
-            background-image: linear-gradient(to right, yellow, green);
-        }
-
-        /* 不写方向，表示默认的方向是：从上往下 */
-        div:nth-child(2) {
-            background-image: linear-gradient(yellow, green);
-        }
-
-        /* 方向可以指定角度 */
-        div:nth-child(3) {
-            width: 100px;
-            height: 100px;
-            background-image: linear-gradient(135deg, yellow, green);
+<head>
+    <meta charset="UTF-8">
+    <meta name="Generator" content="EditPlus®">
+    <meta name="Author" content="">
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <title>Document</title>
+
+    <style type="text/css">
+        .div1 {
+            width: 0;
+            height: 0;
+            border-top: 30px solid red;
+            /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
+            border-left: 30px solid transparent;
+            border-right: 20px solid transparent;
         }
 
-        /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
-        div:nth-child(4) {
-            background-image: linear-gradient(to right,
-            yellow 0%,
-            red 40%,
-            green 70%,
-            blue 100%);
-
+        .box2 {
+            width: 250px;
+            height: 250px;
+            padding: 25px;
+            border: 1px solid red;
         }
+    </style>
 
-        /* 颜色之间，出现突变 */
-        div:nth-child(5) {
-            background-image: linear-gradient(45deg,
-            yellow 0%,
-            yellow 25%,
-            blue 25%,
-            blue 50%,
-            red 50%,
-            red 75%,
-            green 75%,
-            green 100%
-            );
-        }
+</head>
 
-        div:nth-child(6) {
-            background-image: linear-gradient(to right,
-            #000 0%,
-            #000 25%,
-            #fff 25%,
-            #fff 50%,
-            #000 50%,
-            #000 75%,
-            #fff 75%,
-            #fff 100%
-            );
+<body>
 
-        }
+    <div class="div1"></div>
+    <div class="box2">狭路相逢</div>
 
-    </style>
-</head>
-<body>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
 </body>
+
 </html>
