菜鳥教程上提供了一個非常好用的CSS圖片廊，讓我們可以輕松地創建一個漂亮的照片墻。下面我們來看一下如何使用這個圖片廊。

/* 最基礎的樣式 */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
height: 100%;
}
.gallery img {
width: 100%;
height: auto;
margin: 5px;
transition: transform .2s;
cursor: pointer;
}
.gallery img:hover {
transform: scale(1.1);
}

上面是包括基礎樣式的代碼，需要在你的CSS文件中添加。我們可以發現，這個圖片廊使用了flex布局，可以讓我們方便地控制圖片的排列方式。同時，每張圖片都使用了相同的margin值，并且定義了當鼠標移動到圖片上時的動畫效果。

/* 進一步的樣式 */
.gallery {
position: relative;
}
.gallery img.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .2s;
}
.gallery img:hover + img.overlay {
opacity: 1;
}
.gallery img.overlay:hover {
opacity: 1;
}
.gallery .caption {
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0,0,0,0.7);
color: #fff;
text-align: center;
transition: bottom .2s;
}
.gallery img:hover + .caption {
bottom: 0;
}

這部分代碼是進一步的樣式設置，可以提升圖片廊的用戶體驗?？梢园l現，這部分代碼主要是使用了CSS3中的一些效果，如opacity、transition等。同時，我們還為每張圖片添加了遮罩層，當鼠標移動到圖片上時會出現說明文字，讓我們更好地了解圖片的信息。

總的來說，這個CSS圖片廊非常實用，可以給我們的頁面增添很多美感，同時也提升了用戶的體驗感。通過這個例子，我們可以更好地掌握CSS的一些技能，例如基礎布局、CSS3動畫效果的使用等等。