HTML电子相册代码教程
在这篇教程中，我们将学习如何使用HTML和CSS创建简单的电子相册。这个相册将包含多张照片，每张照片都能够展示完整的图片和一些有关图片的说明信息。
HTML代码
<html>
<head>
<title>我的电子相册</title>
<style type="text/css">
.photo-container {
display: flex;
flex-wrap: wrap;
}
.photo-container img {
width: 200px;
height: 200px;
padding: 10px;
}
.photo-container p {
font-size: 1.2em;
font-weight: bold;
text-align: center;
margin-top: 0;
}
</style>
</head>
<body>
<h1>我的电子相册</h1>
<div class="photo-container">
<div class="photo">
<a href="img1.jpg"><img src="img1-thumb.jpg" alt="我的照片1"></a>
<p>我的照片1</p>
</div>
<div class="photo">
<a href="img2.jpg"><img src="img2-thumb.jpg" alt="我的照片2"></a>
<p>我的照片2</p>
</div>
<div class="photo">
<a href="img3.jpg"><img src="img3-thumb.jpg" alt="我的照片3"></a>
<p>我的照片3</p>
</div>
<div class="photo">
<a href="img4.jpg"><img src="img4-thumb.jpg" alt="我的照片4"></a>
<p>我的照片4</p>
</div>
</div>
</body>
</html>在这个代码示例中，我们首先创建了一个HTML文件并在文件头部添加了页面的标题和CSS样式。我们使用了一个名为“photo-container”的div来包含所有的照片。将该div的display属性设置为flex，这将使其内部元素排列成一行。使用flex-wrap来实现当空间不足时，元素自动换行。
对于每个照片，我们都创建了一个名为“photo”的div，并在其中添加了照片的缩略图链接和说明文字。使用了一个名为“photo”class的div，其作用是将所有的照片样式统一起来，并使它们具有相同的外观和布局结构。
最后，我们将整个“photo-container”div添加到页面的主体中。
CSS代码
.photo-container {
display: flex;
flex-wrap: wrap;
}
.photo-container img {
width: 200px;
height: 200px;
padding: 10px;
}
.photo-container p {
font-size: 1.2em;
font-weight: bold;
text-align: center;
margin-top: 0;
}这段CSS代码用于设置我们创建的电子相册的外观和布局。我们首先使用flexbox让所有照片排成一行，而不是一个接一个排列。
然后，我们使用了一个名为“photo”的class来设置每个照片的外观和布局。我们在其中设置了所有照片的宽度、高度和内边距，以及说明文字的样式。
这些CSS样式可以根据你的需要进行编辑，以更改照片的大小和间距，或者更改文字的颜色和字体。
结论
在这个HTML电子相册代码教程中，我们学习了如何使用HTML和CSS来创建一个简单的电子相册。我们可以通过添加更多的照片和编辑CSS样式来自定义我们的相册，以使其更符合我们的需求。