diff --git a/src/CssStudy/3.png b/src/CssStudy/3.png
new file mode 100644
index 0000000..4426302
Binary files /dev/null and b/src/CssStudy/3.png differ
diff --git a/src/CssStudy/css新特性.html b/src/CssStudy/css新特性.html
new file mode 100644
index 0000000..b5b90e9
--- /dev/null
+++ b/src/CssStudy/css新特性.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>
+        .d1{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            /* 设置圆角属性，为50%，100%是为一个圆 */
+            border-radius: 20px;
+        }
+        .d2{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+          
+            border-radius: 20px;
+            box-shadow: 0 10px 20px blue;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="d2"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/动画.html b/src/CssStudy/动画.html
new file mode 100644
index 0000000..c66d3e9
--- /dev/null
+++ b/src/CssStudy/动画.html
@@ -0,0 +1,43 @@
+<!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{
+            width: 200px;
+            height: 200px;
+            /*animation代表引入动画样式，mydh为自定义动画名，duration为动画持续时间；   timing-function为动画播放速率（可取值为 ease逐渐变慢； linear匀速； ease-in加速；   ease-out减速；  ease-in-out先加速后减速）  */
+            /* delay表示延时执行时间；  iteration-count为循环次数，infinite代表无限次执行 */
+            animation: mydh 2s linear 0s infinite;
+        }
+        div:hover{
+            /* 控制播放状态，running表示播放，paused代表暂停 */
+            animation-play-state: paused;
+            background-color: orange;
+        }
+        /* 
+        使用 @keyframes创建动画，后跟自定义的动画名；下面的百分比可自定义添加对动画进度进行控制 */
+        @keyframes mydh {
+            0%{
+                /* 表示透明度。范围为0——1 */
+                opacity: 0.1;
+                background-color: brown;
+            }
+            50%{
+                opacity: 0.5;
+                background-color: green;
+            }
+            100%{
+                opacity: 1;
+                background-color: blue;
+            }
+            
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/媒体查询.html b/src/CssStudy/媒体查询.html
new file mode 100644
index 0000000..3531121
--- /dev/null
+++ b/src/CssStudy/媒体查询.html
@@ -0,0 +1,39 @@
+<!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>
+        @media screen and (max-width: 768px) {
+
+            /* 设备小于768px加载样式 */
+            body {
+                background-color: red;
+            }
+        }
+
+        @media screen and (max-width: 992px) and (min-width: 768px) {
+
+            /* 设备小于768px但小于992px加载样式 */
+            body {
+                background-color: pink;
+            }
+        }
+
+        @media screen and (min-width: 992px) {
+
+            /* 设备大于992px加载样式 */
+            body {
+                background-color: green;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/定位.html b/src/CssStudy/定位.html
new file mode 100644
index 0000000..c1c1d98
--- /dev/null
+++ b/src/CssStudy/定位.html
@@ -0,0 +1,62 @@
+<!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>
+        /* 相对定位,不会脱离文档流 */
+        .d1{
+        width: 200px;
+        height: 300px;
+        position: relative;
+        background-color: rebeccapurple;
+        left: 50px;
+        top: 100px;
+    }
+    /* 绝对定位：脱离文档流，每加一个绝对定位会加一层图层 */
+       .d2{
+        width: 100px;
+        height: 200px;
+        position: absolute;
+        background-color: red;
+        left: 50px;
+        top: 100px;
+    }
+    /* 固定定位：脱离图层且在文档的位置固定 */
+      .d3{
+        width: 100px;
+        height: 100px;
+        position: fixed;
+        background-color: blue;
+        left: 50px;
+        top: 100px;
+    }
+
+    /* 相对定位和绝对定位是相对于设置了定位的父模块进行定位，如果父模块不具有定位，则继续向上进行查找，直到顶层文档 */
+      .d4{
+        width: 100px;
+        height: 200px;
+        position: fixed;
+        background-color: red;
+        left: 500px;
+        top: 200px;
+    }
+        .d5{
+        width: 100px;
+        height: 100px;
+        position: relative;
+        background-color: blue;
+        left: 30px;
+        top: 10px;
+    }
+    </style>
+    
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="d2"></div>
+    <div class="d3"></div>
+    <div class="d4"><div class="d5"></div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/雪碧图.html b/src/CssStudy/雪碧图.html
new file mode 100644
index 0000000..be80371
--- /dev/null
+++ b/src/CssStudy/雪碧图.html
@@ -0,0 +1,35 @@
+<!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>
+        /*  通过background-image引入背景图片
+            通过background-position把背景图片移动到自己需要的位置 */
+        .icon1 {
+            display: block;
+            background-image: url(3.png);
+            background-position: -7px 0;
+            width: 25px;
+            height: 25px;
+        }
+
+        .icon2 {
+            display: block;
+            background-image: url(3.png);
+            background-position: -93px -84px;
+            width: 25px;
+            height: 25px;
+        }
+    </style>
+</head>
+
+<body>
+    <i class="icon1"></i>
+    <i class="icon2"></i>
+
+</body>
+
+</html>
\ No newline at end of file
