使用html实现图片相册展示设计
以下是一个简单的HTML页面示例，用于展示图片相册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片相册</title>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#gallery img {
margin: 5px;
width: 150px;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<div id="gallery">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
<!-- 更多图片只需复制粘贴<img src="图片路径" alt="图片描述">即可 -->
</div>
</body>
</html>在这个示例中，我们定义了一个简单的相册展示，所有的图片都放在了一个名为gallery的div容器中。每张图片都是img元素，并通过src属性指定图片的路径，alt属性提供图片的描述信息。CSS样式使得图片可以以网格形式展示，并且图片会自适应填充在150x150像素的框内。
评论已关闭