用20张照片布置一个爱心的形状用html+css完成
时间: 2024-02-05 18:13:45 浏览: 41
好的,以下是使用 HTML 和 CSS 布置一个爱心形状的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Love Heart</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.heart {
width: 100px;
height: 100px;
margin: 10px;
position: relative;
transform: rotate(45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 50%;
}
.heart:before {
width: 100px;
height: 100px;
top: 0;
left: -50px;
}
.heart:after {
width: 100px;
height: 100px;
top: -50px;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="heart"><img src="1.jpg"></div>
<div class="heart"><img src="2.jpg"></div>
<div class="heart"><img src="3.jpg"></div>
<div class="heart"><img src="4.jpg"></div>
<div class="heart"><img src="5.jpg"></div>
<div class="heart"><img src="6.jpg"></div>
<div class="heart"><img src="7.jpg"></div>
<div class="heart"><img src="8.jpg"></div>
<div class="heart"><img src="9.jpg"></div>
<div class="heart"><img src="10.jpg"></div>
<div class="heart"><img src="11.jpg"></div>
<div class="heart"><img src="12.jpg"></div>
<div class="heart"><img src="13.jpg"></div>
<div class="heart"><img src="14.jpg"></div>
<div class="heart"><img src="15.jpg"></div>
<div class="heart"><img src="16.jpg"></div>
<div class="heart"><img src="17.jpg"></div>
<div class="heart"><img src="18.jpg"></div>
<div class="heart"><img src="19.jpg"></div>
<div class="heart"><img src="20.jpg"></div>
</div>
</body>
</html>
```
你需要将代码中的 `1.jpg` 到 `20.jpg` 替换成你自己的图片文件名,并确保这些图片文件与 HTML 文件在同一个文件夹内。
这段代码使用了一个名为 `container` 的容器,用于将所有的爱心图案居中显示。每个爱心图案都有一个名为 `heart` 的类,它们被包含在容器中。每个爱心图案都由一个伪元素 `:before` 和 `:after` 组成,它们分别代表爱心的左半部分和右半部分。将这两个伪元素旋转 45 度之后,它们就会组成一个完整的爱心形状。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)