用html css写一个图片展示的精美页面
时间: 2023-09-26 22:15:16 浏览: 52
好的,我来为您编写一个简单的图片展示页面。以下是HTML和CSS的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片展示页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>图片展示页面</h1>
<div class="gallery">
<div class="item">
<img src="https://picsum.photos/id/237/200/300" alt="图片1">
<div class="caption">图片1</div>
</div>
<div class="item">
<img src="https://picsum.photos/id/238/200/300" alt="图片2">
<div class="caption">图片2</div>
</div>
<div class="item">
<img src="https://picsum.photos/id/239/200/300" alt="图片3">
<div class="caption">图片3</div>
</div>
<div class="item">
<img src="https://picsum.photos/id/240/200/300" alt="图片4">
<div class="caption">图片4</div>
</div>
</div>
</div>
</body>
</html>
```
CSS代码:
```css
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 50px;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 25%;
margin: 10px;
position: relative;
overflow: hidden;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.item:hover img {
transform: scale(1.1);
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.item:hover .caption {
opacity: 1;
}
```
这个页面使用了Flexbox布局来排列图片,并添加了简单的CSS动画特效,包括当鼠标悬停在图片上时的放大效果和图片标题的淡入淡出。您可以将示例代码复制到您的本地文件中并通过浏览器打开来查看效果。