当先锋百科网

首页 1 2 3 4 5 6 7

HTML电子相册是一个相对简单的项目,它可以让网站的访问者轻松地浏览相片集合。以下是一个简单的HTML相册代码示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的相册</title>
<style>
#gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
#gallery img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>我的相册</h1>
<div id="gallery">
<img src="photo1.jpg" alt="photo1">
<img src="photo2.jpg" alt="photo2">
<img src="photo3.jpg" alt="photo3">
<img src="photo4.jpg" alt="photo4">
<img src="photo5.jpg" alt="photo5">
<img src="photo6.jpg" alt="photo6">
</div>
</body>
</html>

上文代码中的HTML标记创建了一个具有标题,一个ID为“画廊”的包含相片的图片网格。样式表代码定义了网格并指定了图片的宽高比例。

该代码创建了一个简单的网格相册,你可以将其扩展到一个完整的相册项目并添加更多的功能,例如滑动视图和图片注释等等。HTML和CSS制作出一个简单易懂的界面,随着创新您可以用JavaScript来添加一些美化和交互性,让你的相册变得更加有趣。