淘寶是一個流行的在線購物網站,在該網站的產品頁面上,您可以看到針對同一個產品的多張圖片。這些圖片使用CSS來進行排布并形成一個多圖片展示的效果。
.taobao-img { display: flex; justify-content: center; align-items: center; height: 500px; overflow: hidden; } .taobao-img img { max-height: 100%; max-width: 100%; transition: transform 0.2s ease-in-out; } .taobao-img img:hover { transform: scale(1.1); cursor: pointer; } .taobao-img img:active { transform: scale(0.95); }
代碼中,我們首先創建一個類名為“taobao-img”的div標簽,用于包含所有的產品圖片。該div使用flex布局,并設置居中對齊方式和高度限制,以便避免圖片溢出。接下來,我們為每個圖片設置了一個類名,在CSS中進行適當的樣式設置。
我們設置了圖片的最大高度和最大寬度以確保尺寸在各個屏幕上一致。我們還使用了CSS的“transition”屬性,以在鼠標懸停時為圖片添加0.2秒的放大效果。在鼠標按下時,圖片會略微縮小,以提供反饋。
通過這些簡單的CSS樣式,我們可以復制淘寶或其他在線商店中的多圖片展示功能。
下一篇css 代表