html电子相册
时间: 2023-07-01 20:26:16 浏览: 101
HTML电子相册可以通过HTML、CSS和JavaScript来创建。下面是一个简单的HTML电子相册的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Photo Album</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333333;
margin-top: 50px;
}
.photo-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.photo-container img {
margin: 10px;
max-width: 300px;
border: 5px solid #ffffff;
box-shadow: 0px 0px 10px #999999;
}
</style>
</head>
<body>
<h1>My Photo Album</h1>
<div class="photo-container">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
<img src="photo4.jpg">
<img src="photo5.jpg">
<img src="photo6.jpg">
<img src="photo7.jpg">
<img src="photo8.jpg">
<img src="photo9.jpg">
</div>
</body>
</html>
```
在这个例子中,我们使用了flexbox布局来创建一个相册容器,并在其中放置了一些图片。我们还使用了CSS样式来添加一些装饰和样式效果。
当用户访问这个页面时,他们将看到一个漂亮的相册,其中包含了我们添加的所有图片。他们可以通过单击图片来查看它们的详细信息或者放大它们。