|
|
.container {
|
|
|
height: 100vh;
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
z-index: -2;
|
|
|
}
|
|
|
.teacher-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 50px; /* 距离左侧200px */
|
|
|
top: 222px; /* 距离顶部150px */
|
|
|
width: 260px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.text1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 28px; /* 距离左侧50px */
|
|
|
top:135px; /* 距离顶部50px */
|
|
|
font-size: 55px; /* 字号 */
|
|
|
margin: 10psx; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color: #4f4f4f; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 2;
|
|
|
}
|
|
|
.green1-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 0px; /* 距离左侧200px */
|
|
|
top: 0px; /* 距离顶部150px */
|
|
|
width: 180px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 1; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.green2-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 125px; /* 距离左侧200px */
|
|
|
top: 258px; /* 距离顶部150px */
|
|
|
width: 250px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 1; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.music-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 310px; /* 距离左侧200px */
|
|
|
top: 90px; /* 距离顶部150px */
|
|
|
width: 80px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 3; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.home-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 15px; /* 距离左侧200px */
|
|
|
top: 30px; /* 距离顶部150px */
|
|
|
width: 40px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 3; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.rectangle1 {
|
|
|
position: absolute;
|
|
|
left: 3px; /* 矩形左上角的横坐标 */
|
|
|
top: 25px; /* 矩形左上角的纵坐标 */
|
|
|
width: 60px; /* 矩形的宽度 */
|
|
|
height: 40px; /* 矩形的高度 */
|
|
|
border-radius: 50px; /* 圆角边框 */
|
|
|
background-color:#fff4e6 ;
|
|
|
border: 3px dashed #e1b474; /* 矩形的边框 */
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.rectangle2 {
|
|
|
position: absolute;
|
|
|
left: 80px; /* 矩形左上角的横坐标 */
|
|
|
top: 520px; /* 矩形左上角的纵坐标 */
|
|
|
width: 200px; /* 矩形的宽度 */
|
|
|
height: 60px; /* 矩形的高度 */
|
|
|
border-radius: 28px; /* 圆角边框 */
|
|
|
background-color:#2b84fe ;
|
|
|
border: 1px dashed #bbbbbb; /* 矩形的边框 */
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.rectangle3 {
|
|
|
position: absolute;
|
|
|
left: 80px; /* 矩形左上角的横坐标 */
|
|
|
top: 600px; /* 矩形左上角的纵坐标 */
|
|
|
width: 200px; /* 矩形的宽度 */
|
|
|
height: 60px; /* 矩形的高度 */
|
|
|
border-radius: 28px; /* 圆角边框 */
|
|
|
background-color:#ffdb17 ;
|
|
|
border: 1px dashed #bbbbbb; /* 矩形的边框 */
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.text2 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 105px; /* 距离左侧50px */
|
|
|
top:530px; /* 距离顶部50px */
|
|
|
font-size: 34px; /* 字号 */
|
|
|
margin: 10psx; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color: #f2f2f0; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 2;
|
|
|
}
|
|
|
.text3 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 105px; /* 距离左侧50px */
|
|
|
top:610px; /* 距离顶部50px */
|
|
|
font-size: 34px; /* 字号 */
|
|
|
margin: 10psx; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color: #694b4b; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 2;
|
|
|
} |
