diff --git a/src/CssStudy/1.webp b/src/CssStudy/1.webp
new file mode 100644
index 0000000..60236b8
Binary files /dev/null and b/src/CssStudy/1.webp differ
diff --git a/src/CssStudy/2.webp b/src/CssStudy/2.webp
new file mode 100644
index 0000000..882545f
Binary files /dev/null and b/src/CssStudy/2.webp differ
diff --git a/src/CssStudy/cssstudy1.html b/src/CssStudy/cssstudy1.html
new file mode 100644
index 0000000..969a66b
--- /dev/null
+++ b/src/CssStudy/cssstudy1.html
@@ -0,0 +1,25 @@
+<!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:orange;
+            font-size: 30px;
+        }
+    </style>
+</head>
+
+<body>
+    <p style="color: red; font-size: 20px;">这是内联样式</p>
+    <!-- 缺点：缺乏整体性和规划性，不利于维护 -->
+
+    <a>这是内部样式</a>
+    <!-- 再单个页面实现了统一维护和管理，但是再多个页面上会显得不够统一，混乱 -->
+     <a href="./cssstudy2.html">点击跳转外部样式</a>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/cssstudy2.html b/src/CssStudy/cssstudy2.html
new file mode 100644
index 0000000..f0f5285
--- /dev/null
+++ b/src/CssStudy/cssstudy2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+   <link rel="stylesheet" href="./public.css">
+</head>
+
+<body>
+    <p style="color: red; font-size: 20px;">这是外部样式</p>
+    <!-- CSS 的优先级顺序是从低到高依次为外部样式表、内部样式表、内联样式。内联样式直接写在 HTML 元素的 style 属性中，所以它离目标元素最近，优先级也就最高。 -->
+    <a>这是外部样式</a>
+  <!-- 外部样式可以通过一个文件进行整个网页的样式调整，极大地增强了复用性和可维护性 -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/public.css b/src/CssStudy/public.css
new file mode 100644
index 0000000..0fc1649
--- /dev/null
+++ b/src/CssStudy/public.css
@@ -0,0 +1,8 @@
+a{
+  font-size: large;
+  color: blue;
+}
+p{
+    font: 100;
+    color: red;
+}
\ No newline at end of file
diff --git a/src/CssStudy/关系选择器.html b/src/CssStudy/关系选择器.html
new file mode 100644
index 0000000..fb6adc3
--- /dev/null
+++ b/src/CssStudy/关系选择器.html
@@ -0,0 +1,40 @@
+<!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>
+        /* 后代选择器 */
+        ul li p{
+            color: blueviolet;
+        }
+        /* 子代选择器 */
+        ul>li{
+            color: red;
+        }
+        /* 相邻兄弟选择器 */
+        li+p{
+            color: blue;
+        }
+        /* 通用兄弟选择器 */
+        p~li{
+            color:brown
+        }
+    </style>
+</head>
+<body>
+    <ul>
+        <li>
+            <p>你好</p>
+            <p>我是</p>
+            <a href="#">aaaaaaaaaaaaa</a>
+            <p>子代的子代</p>
+        </li>
+        <p>子代1</p>
+        <p>子代2</p>
+        <li>hahaha</li>
+        <a href="#">aaaaaaaaaa</a>
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/字体属性.html b/src/CssStudy/字体属性.html
new file mode 100644
index 0000000..9396d01
--- /dev/null
+++ b/src/CssStudy/字体属性.html
@@ -0,0 +1,22 @@
+<!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>
+    <p style="color: red;">字体颜色</p>
+    <p style="color: #ff0000;">字体颜色</p>
+    <p style="color: rgb(255, 122, 0);">字体颜色</p>
+    <p style="color: rgba(255, 122, 0,.5);">字体颜色</p>
+    <p style="font-size: 50px ;">字体大小</p>
+    <p style="font-weight: bold ;">字体粗细</p>
+    <p style="font-weight: bolder ;">字体粗细</p>
+    <p style="font-weight: lighter ;">字体粗细</p>
+    <p style="font-weight: 700 ;">字体粗细</p>
+    <P style="font-style: normal;">字体样式</P>
+    <P style="font-style: italic;">字体样式</P>
+    <P style="font-family: 'Courier New', Courier, monospace;  font-size: 50px;">字体</P>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/弹性盒子.html b/src/CssStudy/弹性盒子.html
new file mode 100644
index 0000000..44109ab
--- /dev/null
+++ b/src/CssStudy/弹性盒子.html
@@ -0,0 +1,64 @@
+<!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>
+        .maindiv {
+            width: 500px;
+            height: 500px;
+            background-color: aqua;
+            /* 开启弹性盒子 */
+            display: flex;
+            /* row：横向从左到右排列（左对齐），默认的排列方式
+             row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
+             column：纵向排列
+             column-reverse：反转纵向排列，从后往前排，最后一项排在最上面*/
+            flex-direction: row;
+            /* 
+            start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
+            end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
+            center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
+            */
+            justify-content: center;
+            /* 垂直方向上的对齐方式，属性同上 */
+            align-items: center;
+
+        }
+
+        .d1 {
+            width: 100px;
+            height: 100px;
+            background-color: red;
+            /* 按照比例分配空间 */
+            flex:3;
+        }
+
+        .d2 {
+            width: 100px;
+            height: 100px;
+            background-color: blue;
+            flex:2;
+        }
+
+        .d3 {
+            width: 100px;
+            height: 100px;
+            background-color: green;
+            flex: 1;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="maindiv">
+        <div class="d1"></div>
+        <div class="d2"></div>
+        <div class="d3"></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..430da90
--- /dev/null
+++ b/src/CssStudy/文本属性.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>
+</head>
+<body>
+    <!-- center;    left;   right; -->
+    <p style="text-align: center;">水平对齐方式</p>
+
+    <p style="text-decoration: underline;">下划线</p>
+    <p style="text-decoration: overline;">上划线</p>
+    <p style="text-decoration: line-through;">删除线</p>
+
+    <p style="text-transform: capitalize;">helloworld</p>
+    <p style="text-transform: uppercase;">ADXASlloworld</p>
+    <p style="text-transform: lowercase;">heASworld</p>
+    
+    
+    <p style="text-indent: 30px;">29日早晨到白天，全省多云转阵雨或雷阵雨；另外，29日早晨到上午，大连、丹东、葫芦岛地区局部有大雾或浓雾；全省最高气温25度到29度；全省最低气温22度到23度。
+
+29日夜间到30日白天，沈阳、大连、鞍山、抚顺、本溪、丹东、营口、辽阳、铁岭地区和沈抚示范区有中雨，局部有大雨，个别乡镇（街道）有暴雨，其他地区有小雨或阵雨。
+
+30日夜间到1日白天，大连、本溪、丹东地区有小雨到中雨，局部有大雨，其他地区有小雨或阵雨。
+
+7月1日夜间，大连、抚顺、本溪、丹东地区及岫岩有小雨到中雨，局部大雨，朝阳地区多云，其他地区有阵雨或雷阵雨。</p>
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/文档流.html b/src/CssStudy/文档流.html
new file mode 100644
index 0000000..e008ffe
--- /dev/null
+++ b/src/CssStudy/文档流.html
@@ -0,0 +1,57 @@
+<!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>
+        .maindiv {
+            width: 200px;
+            height: 200px;
+            background-color: aqua;
+        }
+
+        .d1 {
+            width: 100PX;
+            height: 100PX;
+            background-color: RED;
+            /* 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱
+            离文档流的上层页面，所以会出现折叠现象;
+            浮动只能左右浮动
+ */
+            float: right;
+        }
+        img{
+            width: 150px;
+            float: left;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="maindiv">
+        <div class="d1"></div>
+        <div class="d1"></div>
+        <div class="d1"></div>
+    </div>
+    <img src="./1.webp" alt="">
+    <img src="./1.webp" alt="">
+</body>
+
+
+<!-- 清除浮动的方法：
+ 父元素设置高度
+受影响的元素增加clear属性： clear: both;
+
+overflow清除浮动(父元素中加)：overflow: hidden;
+                         clear: both;
+伪对象方式 
+选择器::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+-->
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/盒子模型.html b/src/CssStudy/盒子模型.html
new file mode 100644
index 0000000..2cbd78a
--- /dev/null
+++ b/src/CssStudy/盒子模型.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>
+        /*  Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
+            Border(边框) - 围绕在内边距和内容外的边框
+            Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
+            Content(内容) - 盒子的内容，显示文本和图
+            padding和margin都可以灵活设置top,left,right,bottom的值来控制div大小 */
+        div{
+            width: 200px;
+            height: 150px;
+            background-color: aqua;
+            padding:50px;
+            border: 2px solid red;
+            margin: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div>wodshi 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..58cfd40
--- /dev/null
+++ b/src/CssStudy/背景属性.html
@@ -0,0 +1,54 @@
+<!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>
+<style>
+    .bac{
+        width: 500px;
+        height: 510px;
+        background-color: green;
+        background-image: url("1.webp");
+        /* 平铺方式：
+        repeat：默认方式；
+        repeat-x:只水平平铺
+        repeat-y：只垂直平铺
+        no-repeat：不平铺 
+        */
+        background-repeat: repeat-x;
+        /* length:只调整高或宽，另一个值等比例改变
+        percentage:设定百分比
+        cover:锁定比例并且充满容器，多余部分不显示
+        contain:锁定比例且保证图片最大 */
+
+        background-size: 500px;
+    }
+    .bac2{
+        width: 1000px;
+        height: 1100px;
+        background-color: green;
+        background-image: url("2.webp");
+        background-repeat: no-repeat;
+
+        background-size: contain;
+    }
+     .bac3{
+        width: 200px;
+        height: 100px;
+        background-color: green;
+        background-image: url("2.webp");
+        background-repeat: no-repeat;
+        /* 用left,right,top,bottom组合确定图像起始位置
+        x% y%：只设置一个另一个默认为50%。 都不设置默认为0% 0%；
+        xpos ypos:像素表示  */
+        background-position: left center;
+    }
+</style>
+<body>
+    <div class="bac"></div>
+    <div class="bac2"></div>
+    <div class="bac3"></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..dab08e5
--- /dev/null
+++ b/src/CssStudy/表格属性.html
@@ -0,0 +1,46 @@
+<!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>
+        table,td{
+            border: 1px solid black;
+        }
+        table{
+            border-collapse: collapse;
+            width: 50%;
+        }
+        td{
+            width: 200px;
+            height: 100px;
+            text-align: center;
+            vertical-align: bottom;
+            padding: 20px;
+            background-color: aquamarine;
+            color: red;
+        }
+        
+    </style>
+</head>
+<body>
+    <table>
+        <tr>
+            <td>单元格</td>
+            <td>单元格</td>
+            <td>单元格</td>
+        </tr>
+        <tr>
+            <td>单元格</td>
+            <td>单元格</td>
+            <td>单元格</td>
+        </tr>
+        <tr>
+            <td>单元格</td>
+            <td>单元格</td>
+            <td>单元格</td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/CssStudy/选择器.html b/src/CssStudy/选择器.html
new file mode 100644
index 0000000..d241f5b
--- /dev/null
+++ b/src/CssStudy/选择器.html
@@ -0,0 +1,68 @@
+<!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>
+        * {
+            color: red;
+        }
+
+        /* 全局选择器：能够匹配所有标签但是优先级较低 */
+        p {
+            color: blue;
+        }
+
+        /*标签选择器：能够选定所有选定的标签*/
+        .content {
+            color: aquamarine;
+        }
+
+        .size {
+            font-size: 20px;
+        }
+
+        /* 类选择器:选择更加灵活
+        可以被多个标签使用；
+        不一数字开头；
+        同一个标签可以使用多个类选择器，空格隔开
+         */
+        #size0 {
+            color: chartreuse;
+        }
+
+        /* id唯一；不以数字开头；只能使用一次 */
+        .s1,.s2{
+            color:red;
+        }
+        /*  提取相同代码，提高复用性 */
+
+        /* 选择器优先级：
+        行内样式>id选择器>类选择器>元素选择器 */
+    </style>
+
+</head>
+
+<body>
+
+    <p>diyige</p>
+    <p>dierger</p>
+    <a href="#">hahaha</a>
+    <div>
+        <ul>
+            <li>
+                <p>藏得深吧</p>
+            </li>
+        </ul>
+    </div>
+</body>
+<p class="content">nihao</p>
+<p class="content size">woshishei</p>
+<p id="size0">ID选择器</p>
+
+<h3 class="s1">1111</h3>
+<p class="s2">6666</p>
+
+</html>
\ No newline at end of file
diff --git a/STUDY1/1.jfif b/src/htmlStudy/1.jfif
similarity index 100%
rename from STUDY1/1.jfif
rename to src/htmlStudy/1.jfif
diff --git a/STUDY1/webtudy1.html b/src/htmlStudy/webtudy1.html
similarity index 91%
rename from STUDY1/webtudy1.html
rename to src/htmlStudy/webtudy1.html
index f2829ab..90546ab 100644
--- a/STUDY1/webtudy1.html
+++ b/src/htmlStudy/webtudy1.html
@@ -140,4 +140,21 @@
 <!-- 块级元素和行内元素 -->
  <!-- 常见块级元素： div,form,h1,hr,p,table, ul,ol等    独占一行，可以设置宽高，可以包含行内元素和其他块级元素 -->
   <!-- 常见行内元素：a,b,em,strong,span等   不能独占一行，只能设置宽，一般不包含块级元素 -->
+
+  <div id="header"></div>
+  <div id="nav"></div>
+  <div id="areticle">
+    <div id="section"></div>
+  </div>
+  <div id="sidebar"></div>
+  <div id="footer"></div>
+
+  <!-- html新特性 -->
+   <header></header>
+   <nav></nav>
+   <article>
+    <section></section>
+   </article>
+   <aside></aside>
+   <footer></footer>
 </html>
\ No newline at end of file

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格