diff --git "a/\351\255\217\346\205\247\345\251\267/20241021-\345\256\232\344\275\215.md" "b/\351\255\217\346\205\247\345\251\267/20241021-\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cc7855bf4370729b49a3ef892c3be8339f63aa90
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/20241021-\345\256\232\344\275\215.md"
@@ -0,0 +1,143 @@
+## CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+```
+	position: absolute;  <!-- 绝对定位 -->
+
+	position: relative;  <!-- 相对定位 -->
+
+	position: fixed;     <!-- 固定定位 -->
+
+```
+
+### 绝对定位
+1. **绝对定位的盒子脱离了标准文档流。**所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+2. 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
+
+3. 如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角：
+![](https://img.kz0702.cn/20180115_2120.png)
+
+4. 如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角：
+![](https://img.kz0702.cn/20180115_2121.png)
+
+5. 用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
+![](https://img.kz0702.cn/20180115_2132.png)
+
+#### 以盒子为参考点
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+
+如下：（子绝父相）：子元素绝对定位，父元素相对定位
+
+![](https://img.kz0702.cn/20180115_2210.png)
+
+以下几点需要注意。
+
+（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    没有定位
+				<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
+			</div>
+		</div>
+
+```
+
+再比如：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    相对定位
+				<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
+			</div>
+		</div>
+```
+（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
+（3）绝对定位的儿子，无视参考的那个盒子的padding：
+
+#### 让绝对定位中的盒子在父亲里居中
+我们可以总结成一个公式：
+水平居中：
+> left:50%; margin-left:负的宽度的一半
+垂直居中：
+> top:50%; margin-top:负的宽度的一半
+
+
+### 相对定位
+```
+	position: relative;
+	left: 50px;
+	top: 50px;
+```
+#### 相对定位不脱标
+
+**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
+
+也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+
+#### 相对定位的用途
+
+如果想做“压盖”效果（把一个div放到另一个div之上），我们一般**不用**相对定位来做。相对定位，就两个作用：
+
+- （1）微调元素
+- （2）做绝对定位的参考，子绝父相
+
+#### 相对定位的定位值
+
+- left：盒子右移
+
+- right：盒子左移
+
+- top：盒子下移
+
+- bottom：盒子上移
+
+PS：负数表示相反的方向。
+
+
+### 固定定位
+
+**用途1**：网页右下角的“返回到顶部”
+例：
+```html
+	<style type="text/css">
+		.backtop{
+			position: fixed;
+			bottom: 100px;
+			right: 30px;
+			width: 60px;
+			height: 60px;
+			background-color: gray;
+			text-align: center;
+			line-height:30px;
+			color:white;
+			text-decoration: none;   /*去掉超链接的下划线*/
+		}
+	</style>
+```
+**用途2：**顶部导航条
+用锚链接链接到顶部top
+```html
+<a href="top">oioi</a>
+```
+### z-index属性：
+特性：
+- 属性值大的位于上层，属性值小的位于下层。
+
+- z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+- 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+- 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
+
+- 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层
+
+这是默认情况下的例子：（div2在上层，div1在下层）
+![](http://img.smyhvae.com/2015-10-03-css-32.png)
+
+现在加一个`z-index`属性，要求效果如下：
+![](http://img.smyhvae.com/2015-10-03-css-33.png)
+
+第五条分析：
+![](http://img.smyhvae.com/20180116_1445.png)
+
+当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/20241023-\345\212\250\347\224\273.md" "b/\351\255\217\346\205\247\345\251\267/20241023-\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..94e2b2ffb6fed003ab3442c0a368b37acb5a5629
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/20241023-\345\212\250\347\224\273.md"
@@ -0,0 +1,185 @@
+## 过渡：transition
+
+`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+
+1. `transition`包括以下属性：
+
+- `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all。
+- `transition-property: width`，意思是只让盒子的宽度在变化时进行过渡
+- `transition-duration: 1s;` 过渡的持续时间。
+
+- `transition-timing-function: linear;`  运动曲线。属性值可以是：
+	- `linear` 线性
+	- `ease`  减速
+	- `ease-in` 加速
+	- `ease-out` 减速
+	- `ease-in-out`  先加速后减速
+ - `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+2. 上面的四个属性也可以写成**综合属性**：
+```css
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+```
+
+## 2D 转换
+
+### 缩放：`scale`
+语法：
+
+```cs
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+```
+- x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+- 取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+### 位移：translate
+1. 语法：
+
+```cs
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+```
+- 参数为百分比，相对于自身移动。
+
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+2. **应用：**让绝对定位中的盒子在父亲里居中
+可以利用偏移 translate 来做，这也是比较推荐的写法：
+
+```css
+	div {
+	    width: 600px;
+	    height: 60px;
+	    background-color: red;
+	    position: absolute;      /* 绝对定位的盒子     */
+	    left: 50%;               /* 首先，让左边线居中 */
+	    top: 0;
+	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
+	}
+```
+
+### 旋转：rotate
+1. 语法：
+```css
+	transform: rotate(角度);
+
+	transform: rotate(45deg);
+```
+- 正值 顺时针；负值：逆时针。
+- 给盒子设置`transition`过渡,如果没有这行过渡的代码，旋转会直接一步到位
+
+2. `rotate` 旋转时，默认是以盒子的正中心为坐标原点的。如果想**改变旋转的坐标原点**，可以用`transform-origin`属性。格式如下：
+```css
+	transform-origin: 水平坐标 垂直坐标;
+
+	transform-origin: 50px 50px;
+
+	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点
+```
+
+
+## 3D 转换
+![](http://img.smyhvae.com/20180208_2010.png)
+
+如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。
+
+浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+
+### 透视：perspective
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+- 作为 transform 属性的一个值，做用于元素自身。
+- 例：
+```css
+perspective: 500px;
+```
+
+
+### 旋转：rotateX、rotateY、rotateZ
+rotateZ`要配合透视使用
+所有的3d旋转，对着正方向去看，都是顺时针旋转。
+
+**格式：**
+```css
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+
+```
+### 移动：translateX、translateY、translateZ
+`translateZ`必须配合透视来使用
+**格式：**
+
+```css
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+
+```
+
+## 动画
+
+### 定义动画的步骤
+
+- 通过@keyframes定义动画；
+
+- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+- 在指定元素里，通过 `animation` 属性调用动画。
+- 在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
+
+```css
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+animation属性的格式如下：
+```cs
+            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+### 动画属性
+`animation`属性的格式如下：
+```cs
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+- 动画名称、持续时间两个属性，是必选项，且顺序固定。
+- 动画方向属性值：normal 正常，alternate 反向。
+- 运动曲线属性值可以是：linear（线性）   ease-in-out（先加速后减速）  steps()等。
+- 如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行
+
+### steps()的效果
+在调用动画时，我们写成：
+
+
+```cs
+	animation: move2 4s steps(2);
+```
+
+效果如下：
+
+![](http://img.smyhvae.com/20180209_1020.gif)
+
+有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。
diff --git "a/\351\255\217\346\205\247\345\251\267/20241023-\351\200\211\346\213\251\345\231\250.md" "b/\351\255\217\346\205\247\345\251\267/20241023-\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4d309d1e37ce60ea25e42e15decf60aa5aed6871
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/20241023-\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,120 @@
+
+## CSS3 选择器
+我们之前学过 CSS 的选择器，比如：
+```
+     div 标签选择器
+
+     .box 类名选择器
+
+     #box　id选择器
+
+     div p 后代选择器
+
+     div.box 交集选择器
+
+     div,p,span 并集选择器
+
+     div>p 子代选择器
+
+     * : 通配符
+
+     div+p: 选中div后面相邻的第一个p
+
+     div~p: 选中的div后面所有的p
+
+```
+### 属性选择器
+
+属性选择器的标志性符号是 `[]`。
+匹配含义：
+
+```
+^：开头  $：结尾  *：包含
+```
+
+格式：
+
+- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
+
+- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。
+
+- `E[attr~=val]`  选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
+
+### 结构伪类选择器
+伪类选择器的标志性符号是 `:`。
+
+CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。
+
+**1、格式：（第一部分）**（重要）
+
+- `E:first-child` 匹配父元素的第一个子元素E。
+
+- `E:last-child` 匹配父元素的最后一个子元素E。
+
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
+
+- `E:nth-child(odd)` 匹配奇数
+
+- `E:nth-child(even)` 匹配偶数
+
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
+
+### 伪元素选择器
+1.
+- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+
+        /*::before 和::after 是通过 css 模拟出的html标签的效果*/
+        span::before{
+            content:"smyhvae";
+            color:red;
+            background-color: pink;
+            width: 50px;
+            height: 50px;
+            display: inline-block;
+        }
+
+        span::after{
+            content:"永不止步";
+            color:yellowgreen;
+        }
+
+        /*给原本的span标签设置一个默认的属性*/
+        span{
+            border: 1px solid #000;
+        }
+    </style>
+</head>
+<body>
+
+<span>生命壹号</span>
+</body>
+</html>
+
+```
+- 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
+
+- 通过这两个属性添加的伪元素，是**行内元素**，需要转换成块元素才能设置宽高。
+
+2.
+- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 只能在块容器中有效
+
+- `E::first-line` 设置元素 E 里面的**第一行**的样式。 只能在块容器中有效
+
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20231010221714.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20231010221714.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20231010221714.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241023-\344\272\214\345\215\201\345\205\255\345\256\232\344\275\215(4).html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241023-\344\272\214\345\215\201\345\205\255\345\256\232\344\275\215(4).html"
new file mode 100644
index 0000000000000000000000000000000000000000..f3bff1ca660953cb343aac2e990bf92cb39c7d32
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241023-\344\272\214\345\215\201\345\205\255\345\256\232\344\275\215(4).html"
@@ -0,0 +1,61 @@
+<!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: 440px;
+            border: 10px solid #f0f0f0;
+            margin: auto;
+            margin-top: 150px;
+        }
+        .d2{
+            width: 440px;
+            border: 1px solid #ff7400;
+        }
+        .top{
+            width: 440px;
+            height: 280px;
+            background-image: url(./20231010221714.png);
+        }
+        .middle{
+            background-color: black; 
+            text-align: center;
+            line-height: 50px;
+            color: white;
+            height: 50px;
+        }
+        .bottom{
+            margin-top: 15px;
+        }
+        .sp1{ 
+            font-weight: bolder;
+        }
+        p{
+            font-size: 14px;
+        }
+        .sp2{
+            color: #ff7400;   
+            font-size: 25px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2">
+            <div class="top"></div>
+            <div class="middle">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+            <div class="bottom">
+                <span class="sp1">【海雅缤纷城】万达影城（深圳海雅广场...</span>
+                <p>单人电影票，可观看2D</p>
+                <span class="sp2">￥35</span>
+                <span class="sp3">￥80</span>
+                <span class="sp4">已售</span>
+                <span class="sp5">225</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/1.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/1.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d3498a8cb0c25d01e22370bfd236a1f9bee45d70
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.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>
+        div{
+            width: 150px;
+            height: 150px;
+            background-color: red;
+            color: white;
+            font-size: 37px;
+            position: relative;
+            top: 200px;
+            left: 300px;
+            
+        }
+        div:hover{
+            transform: rotate(-360deg);
+            transition: all 1s;
+        }
+    </style>
+</head>
+<body>
+    <div>遥遥领先</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/2.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/3.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/3.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012D\343\200\2013D\350\275\254\346\215\242.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012D\343\200\2013D\350\275\254\346\215\242.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a216bc9edbae225a2d6db26c8cf609e2257652ec
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241024-\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012/\344\272\214\345\215\201\344\270\203\350\277\207\346\270\241\343\200\2012D\343\200\2013D\350\275\254\346\215\242.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>
+        .d1{
+            width: 850px;
+            height: 400px;
+            margin: 100px auto;
+            background-color: #e4e3e3;
+        }
+        .d1 div{
+            width: 230px;
+            height:320px;
+            float: left;
+            margin: 10px 0px 30px 10px;
+            background-color: white;
+            background-repeat: no-repeat;
+            background-position: 5px ;
+        }
+        .d2{
+            background-image: url(./1.png);          
+        }
+        .d3{
+            background-image: url(./2.png);
+           
+        }
+        .d4{
+            background-image: url(./3.jpg);
+        }
+        .d1 div:hover{
+            
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2"></div>
+        <div class="d3"></div>
+        <div class="d4"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file