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来添加一些美化和交互性,让你的相册变得更加有趣。