html相册

前端开发 2025-01-09 2

好的，我为您预备了一个简略的HTML相册示例。这个相册将运用根本的HTML和CSS，您能够根据需求进行修正和扩展。下面是代码示例：

```html我的相册 body { fontfamily: Arial, sansserif; margin: 0; padding: 0; } .gallery { display: flex; flexwrap: wrap; justifycontent: spacearound; padding: 20px; } .gallery img { width: 300px; height: auto; margin: 10px; border: 2px solid ddd; borderradius: 4px; padding: 5px; transition: transform 0.2s; } .gallery img:hover { transform: scale; }

请将上述代码保存为HTML文件，并将您的图片文件（如image1.jpg, image2.jpg等）放在与HTML文件相同的目录下。您能够根据需求增加更多图片和修正款式。这个相册运用CSS的`flexbox`布局，图片将以300像素的宽度显现，并具有简略的边框和圆角作用。当鼠标悬停在图片上时，图片会细微扩大。