哈根达斯案例
需求
演练 利用定位实现甜品广告的效果 0924
图片素材
效望效果
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.image{
width: 310px;
height: 190px;
background-image: url(https://img-blog.csdnimg.cn/20200924164942559.jpg);
}
.father{
position: relative;
margin: auto;
background-color: gold;
width: 310px;
}
.arr1,
.arr2{
width: 60px;
height: 54px;
}
/*左下脚*/
.arr1{
background-image: url(https://img-blog.csdnimg.cn/20200924164942550.gif);
position: absolute;
right: 0;
bottom: 0;
/*left: 200px;*/
/*top:50px;*/
}
.arr2{
background-image: url(https://img-blog.csdnimg.cn/20200924164942551.gif);
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="arr1"></div>
<div class="arr2"></div>
<div class="image"></div>
</div>
</body>
</html>
