HTML入门案例Demo【猫咪相册】
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
以下是一个简单的HTML代码示例，用于创建一个展示猫咪图片的相册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猫咪相册</title>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.thumbnail {
margin: 10px;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>猫咪相册</h1>
<div id="gallery">
<div class="thumbnail">
<a href="images/cat1.jpg" target="_blank">
<img src="images/cat1-thumb.jpg" alt="猫咪1">
</a>
</div>
<div class="thumbnail">
<a href="images/cat2.jpg" target="_blank">
<img src="images/cat2-thumb.jpg" alt="猫咪2">
</a>
</div>
<!-- 更多猫咪图片，只需复制上面的div块，并更换图片文件名即可 -->
</div>
</body>
</html>这段代码使用了HTML定义了一个简单的相册界面，通过CSS进行了简单的样式设置。相册中的每个图片都是一个链接，点击可以查看原始大小的图片。这个示例展示了如何使用HTML和CSS创建一个简单的图片展示界面，并且可以通过简单地复制粘贴来添加更多的图片。
评论已关闭