HTML 網頁相冊的代碼 HTML 網頁相冊是一種很流行的網頁設計形式，它能夠很好地展示一系列圖片或視頻，讓用戶在網頁中快速瀏覽或觀看。在這篇文章中，我們將會介紹如何編寫一個基于 HTML 和 CSS 的簡單網頁相冊。 首先，我們需要在 HTML 文件中定義一個容器 DIV，用于存放相片的縮略圖和標題。代碼如下所示：

<div class="gallery"><figure><img src="image/01.jpg" alt="Image 01"><figcaption>Image 01</figcaption></figure><figure><img src="image/02.jpg" alt="Image 02"><figcaption>Image 02</figcaption></figure><figure><img src="image/03.jpg" alt="Image 03"><figcaption>Image 03</figcaption></figure></div>

接下來，我們需要為這個容器添加一些 CSS 樣式，以使其能夠呈現出我們想要的效果。我們可以為每個圖片縮略圖元素定義一個寬度和高度，以及加上一些內外邊距來改變其排列方式。代碼如下所示：

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1rem;
margin: 0 auto;
max-width: 800px;
}
figure {
margin: 0;
}
figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
figure:hover img {
transform: scale(1.1);
}
figcaption {
padding: .5rem 0;
font-size: 1.5rem;
text-align: center;
}

這個 CSS 樣式將會使我們的網頁相冊呈現出一個漂亮的瀑布流式排列，并且當我們懸停在圖片上時，它們會縮放（感謝:hover偽類實現這一效果）。 最后，我們可以為每個圖像點添加一個鏈接，這樣當用戶點擊圖片時，它們將被定向到相應的頁面或內容。代碼如下所示：

<figure><a href="image/01.jpg" target="_blank"><img src="image/01.jpg" alt="Image 01"><figcaption>Image 01</figcaption></a></figure>

以上就是如何創建一個基于 HTML 和 CSS 的簡單網頁相冊的全部內容。通過這個代碼，我們可以創建漂亮的圖片和視頻集合，從而制作一個令人印象深刻和專業的網站或個人部落格。