CSS 是一種用于樣式設(shè)計(jì)的語(yǔ)言，它可以幫助我們?cè)O(shè)計(jì)出更美觀的網(wǎng)頁(yè)。其中，排列和顯示圖片有著重要的作用。下面，我們來(lái)看一下如何通過(guò) CSS 對(duì)圖片進(jìn)行排列顯示。

/* 首先，設(shè)置圖片的基本樣式 */
img {
display: block; /* 塊級(jí)顯示 */
max-width: 100%; /* 最大寬度為父元素寬度 */
height: auto; /* 高度自適應(yīng) */
margin: 0 auto; /* 居中對(duì)齊 */
border: none; /* 去除邊框 */
}
/* 然后，設(shè)置圖片容器的樣式 */
.container {
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 自動(dòng)換行 */
justify-content: center; /* 水平居中對(duì)齊 */
align-items: center; /* 垂直居中對(duì)齊 */
margin: 0 auto; /* 居中對(duì)齊 */
max-width: 1200px; /* 最大寬度為 1200px */
}
/* 接著，設(shè)置每個(gè)圖片容器的樣式 */
.item {
flex: 0 0 calc(25% - 20px); /* 等分四列，每列之間間隔 20px */
margin: 10px; /* 每個(gè)容器之間間隔 10px */
overflow: hidden; /* 超出容器部分隱藏 */
border-radius: 5px; /* 設(shè)置圓角 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 設(shè)置陰影 */
}
/* 最后，設(shè)置鼠標(biāo)懸停效果 */
.item:hover {
transform: translateY(-5px); /* 上移 5px */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 增加陰影 */
}

上面的代碼中，我們首先通過(guò)設(shè)置圖片的基本樣式，使圖片可以根據(jù)父元素自適應(yīng)寬高，并進(jìn)行居中對(duì)齊。然后，我們使用 Flexbox 布局對(duì)圖片容器進(jìn)行布局，使圖片可以自動(dòng)換行并居中對(duì)齊。接著，我們對(duì)每個(gè)圖片容器進(jìn)行細(xì)節(jié)設(shè)置，包括等分四列、圓角、陰影等。最后，我們?cè)黾恿耸髽?biāo)懸停效果，讓圖片容器有更加動(dòng)態(tài)的感覺(jué)。