HTML照片墻是一個常見的網頁設計元素，它可以用來展示圖片集合。下面是一個簡單的HTML照片墻代碼及步驟。
// 第一步：創建一個包含圖片的HTML網頁 <!DOCTYPE html> <html> <head> <title>我的照片墻</title> </head> <body> <h1>我的照片墻</h1> <ul> <li><img src="photo1.jpg"></li> <li><img src="photo2.jpg"></li> <li><img src="photo3.jpg"></li> <li><img src="photo4.jpg"></li> </ul> </body> </html>
這里我們使用了<img>標簽來加載圖片，并將它們放在一個<ul>標簽的<li>列表中。接下來，我們需要為照片墻添加CSS樣式。
// 第二步：添加CSS樣式
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
h1 {
width: 100%;
text-align: center;
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
li {
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
img:hover {
transform: scale(1.1);
}
</style>在CSS樣式中，我們使用了flex布局來將照片墻變成一個響應式網格。我們還使用了box-sizing來設置CSS盒模型的大小，這樣可以保證樣式中的寬度和高度值與實際尺寸相對應。對于每個圖片，我們使用object-fit屬性將圖片縮放適應容器大小，并使用transition和:hover屬性來實現圖片的放大效果。
以上就是一個基本的HTML照片墻的代碼和步驟。您可以根據自己的需要和喜好調整樣式和布局。