Cách thực hiện - Thư viện hình ảnh có thể cuộn ngang
Tìm hiểu cách tạo thư viện hình ảnh bằng thanh cuộn ngang bằng CSS.
Thư viện hình ảnh với cuộn ngang
Sử dụng thanh cuộn ngang để xem các hình ảnh khác:
Hãy tự mình thử »Tạo Thư viện Hình ảnh với Cuộn ngang
Bước 1) Thêm HTML:
Ví dụ
<div class="scroll-container">
<img src="img_5terre.jpg" alt="Cinque
Terre">
<img src="img_forest.jpg" alt="Forest">
<img
src="img_lights.jpg" alt="Northern Lights">
<img
src="img_mountains.jpg" alt="Mountains">
</div>
Bước 2) Thêm CSS:
Ví dụ
div.scroll-container {
background-color: #333;
overflow:
auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về hình ảnh HTML của chúng tôi để tìm hiểu thêm về hình ảnh.
Mẹo: Hãy xem Hướng dẫn tạo kiểu cho hình ảnh bằng CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho hình ảnh.