CSS相冊切換是一種在網頁中展示圖片集合時的常用技術之一。在相冊中,通常會設置一組縮略圖作為導航,當用戶點擊其中一張縮略圖時,頁面會顯示出對應的大圖。以下是一個簡單的CSS相冊切換的實現方法。
HTML代碼: <div class="gallery"> <div class="thumbnails"> <a href="#img1"><img src="thumb1.jpg" alt="圖片1"></a> <a href="#img2"><img src="thumb2.jpg" alt="圖片2"></a> <a href="#img3"><img src="thumb3.jpg" alt="圖片3"></a> </div> <div class="full-image"> <img src="default.jpg" alt="默認圖片"> </div> </div> CSS代碼: .gallery { display: flex; } .thumbnails { display: flex; flex-direction: column; } .thumbnails a { margin-bottom: 10px; } .full-image img { width: 100%; } /* 點擊縮略圖切換大圖 */ .thumbnails a:focus + .full-image img { display: none; } .thumbnails a:focus + .full-image img:first-child { display: block; }
以上代碼實現的效果是:當用戶點擊縮略圖時,該縮略圖所對應的大圖會顯示在頁面中心。使用a標簽并給其設置:focus偽類,可以實現點擊切換的效果。縮略圖部分使用flex布局,使得縮略圖垂直排列且之間有10px的間距。
需要注意的是,以上代碼中縮略圖部分使用了a標簽,而默認情況下a標簽具有下劃線和藍色字體的特性。我們可以使用CSS的text-decoration和color屬性來去掉下劃線和修改字體顏色。
CSS代碼: a { color: black; text-decoration: none; } a:focus { outline: none; }
以上代碼使用color屬性將字體顏色設置為黑色,并使用text-decoration屬性將a標簽的下劃線去掉。同時使用:focus偽類去除a標簽的點擊效果,使其不再具有虛線邊框。