CSS 可以幫助我們美化和管理我們的圖片，特別是在相冊(cè)領(lǐng)域會(huì)有很多應(yīng)用。下面我們來(lái)介紹如何用 CSS 來(lái)查看相冊(cè)圖片。

首先，我們需要準(zhǔn)備一些 HTML 代碼，來(lái)展示我們的相冊(cè)。代碼如下：

<div class="album">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>

我們可以使用 CSS 來(lái)為這些圖片添加一些樣式，使其在相冊(cè)中更美觀。下面是一個(gè)基本的 CSS 樣式表：

.album {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f5f5f5;
}
.album img {
margin-bottom: 20px;
max-width: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

讓我們來(lái)解釋一下這些樣式。首先，我們將相冊(cè) div 使用 flexbox 布局，并設(shè)置了一些參數(shù)，使其水平對(duì)齊，并在每個(gè)圖片之間添加空間。我們還為整個(gè)相冊(cè)添加了一些 padding 和背景色。

接下來(lái)，我們?yōu)橄鄡?cè)中的每個(gè)圖片添加了一個(gè)樣式，并設(shè)置了一些參數(shù)來(lái)確保圖片不超出其容器大小。我們還添加了一個(gè)漂亮的陰影效果，使圖像看起來(lái)更加生動(dòng)。

現(xiàn)在讓我們添加一個(gè)交互效果，使我們可以在點(diǎn)擊相冊(cè)圖片時(shí)可以查看其放大的形式。我們將使用 :target 偽類，它可以為當(dāng)前的選定元素添加樣式。

.album img:target {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(2);
z-index: 999;
}

我們?cè)O(shè)置被點(diǎn)擊的圖片為絕對(duì)定位，并使其平移并放大 2 倍。我們還將其 z-index 設(shè)置為最高值，以確保它出現(xiàn)在其他元素的上方。

現(xiàn)在，只需點(diǎn)擊圖像即可使其放大。當(dāng)再次點(diǎn)擊時(shí)，它將返回相冊(cè)中。這是一個(gè)簡(jiǎn)單的相冊(cè)查看器，您可以添加更多的樣式和效果，以使其與您的網(wǎng)站風(fēng)格相匹配。