给我整一个秀一点的
时间: 2024-02-13 09:02:05 浏览: 24
好的,下面是一个更加华丽的HTML画廊示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>画廊</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 40px auto;
max-width: 1000px;
}
.gallery img {
width: 300px;
height: 200px;
margin: 10px;
object-fit: cover;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease-in-out;
cursor: pointer;
}
.gallery img:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.gallery img:nth-child(odd) {
transform: rotate(3deg);
}
.gallery img:nth-child(even) {
transform: rotate(-3deg);
}
.gallery img:first-child {
width: 620px;
height: 400px;
transform: rotate(2deg);
order: -1;
}
.gallery img:last-child {
width: 460px;
height: 300px;
transform: rotate(-2deg);
}
.gallery img:nth-child(3) {
width: 400px;
height: 260px;
transform: rotate(1deg);
}
.gallery img:nth-child(4) {
width: 240px;
height: 160px;
transform: rotate(-1deg);
}
.gallery img:nth-child(5) {
width: 280px;
height: 180px;
transform: rotate(2deg);
}
.gallery img:nth-child(6) {
width: 320px;
height: 200px;
transform: rotate(-2deg);
}
.gallery img:nth-child(7) {
width: 360px;
height: 240px;
transform: rotate(3deg);
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
<img src="image6.jpg" alt="image6">
<img src="image7.jpg" alt="image7">
</div>
</body>
</html>
```
这个示例中,我们添加了更多的样式,包括阴影、hover 效果、旋转和大小不同的图片。每个图片都有不同的 transform 属性值,使它们错落有致地排列在一起。第一张图片的 order 属性值为 -1,使它排在第一位。你可以根据自己的需求,修改样式和添加更多的图片。