4 일 전 · 69f743a4b7
--- a/2_CSS/16_颜色格式.html
+++ b/2_CSS/16_颜色格式.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>
			
 
				+        .box{
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            /* 颜色格式 */
			
 
				+            /* 单词用作颜色的色值 */
			
 
				+            /* background-color: blue; */
			
 
				+            /* 十六进制颜色值 0-9 A-F构成  #开头 6位或3位数字 */
			
 
				+            background-color: #ffffff;
			
 
				+            /* rgb 颜色值  rgb(红,绿,蓝) 0-255 有3位构成*/
			
 
				+            background-color: rgb(0,0,0);
			
 
				+            /* hsl 颜色值  hsl(色相,饱和度,亮度) 0-360 0-100 0-100 有3位构成 */
			
 
				+            background-color: hsl(0,0,0);
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/17_阴影.html
+++ b/2_CSS/17_阴影.html
@@ -0,0 +1,21 @@
 
				+<!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;
			
 
				+            margin:100px auto;
			
 
				+            background-color: red;
			
 
				+            /* 阴影效果 */
			
 
				+            box-shadow: 10px 10px 10px rgb(0, 0, 0);
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/18_透明度.html
+++ b/2_CSS/18_透明度.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>
			
 
				+        .box{
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            margin:100px auto;
			
 
				+            background-color: red;
			
 
				+            /* 用颜色控制透明度 */
			
 
				+            /* rgba(红,绿,蓝,透明度) 透明度 0-1 0 完全透明 1 完全不透明 */
			
 
				+            /* background-color: rgba(255, 0, 0,0.2); */
			
 
				+            /* opacity 透明度 0-1 0 完全透明 1 完全不透明 */
			
 
				+            opacity: 0.2;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        <h1>透明度</h1>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/练习4_文章练习.html
+++ b/2_CSS/练习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>
			
 
				+        /* css reset */
			
 
				+        body{
			
 
				+            /* body 有默认8px的外边距，需要重置 */
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        /* 页面背景色 */
			
 
				+        body{
			
 
				+            background-color: #FAFAFA;
			
 
				+        }
			
 
				+        /* 文章容器 */
			
 
				+        .container{
			
 
				+            width: 720px;
			
 
				+            background-color: #ffffff;
			
 
				+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			
 
				+            margin:0 auto;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="container">
			
 
				+        <h1>文章标题</h1>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>