近年來，隨著智能手機的普及，人們越來越喜歡在手機上瀏覽照片。為了給用戶更好的使用體驗，許多網站和 APP 都采用了滑動相冊來展示照片。在這個過程中，CSS 扮演著重要的角色。

下面是一個基本的滑動相冊代碼：

/* HTML */
<div class="gallery"><div class="gallery-container"><div class="photo"></div><div class="photo"></div><div class="photo"></div></div></div>/* CSS */
.gallery {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.gallery-container {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 300%;
height: 100%;
transition: all 0.3s ease-in-out;
}
.photo {
flex: 1;
height: 100%;
background-size: cover;
background-position: center center;
}

可以看到，在 HTML 中，我們首先創建了一個具有“galllery”類名的 div，這是整個滑動相冊的容器。內部還有相冊的具體內容，使用“gallery-container”類，其中包含多個“photo”類，每個類中展示一張照片。

在 CSS 中，我們首先設定了“gallery”類的樣式，指定了相冊的大小和溢出情況。接著，設置“gallery-container”和“photo”的樣式，使用 flex 布局來實現照片的分布和占比，同時設定過渡效果來實現滑動效果。

以上是最基本的滑動相冊代碼，可以根據自己的需要添加各種樣式和效果。例如，可以添加左右滑動按鈕、指示器等等，使用戶可以更方便地瀏覽照片?？傊?，在使用滑動相冊時，要注意樣式的分離和結構的清晰，從而提高用戶的體驗。