Bài 33: Thư viện hình ảnh trong CSS
CSS có thể sử dụng để tạo một thư viện hình ảnh.
Thư viện hình ảnh
Ví dụ này tạo thư viện hình ảnh với CSS:
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/04/img_5terre.jpg">
<img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/04/img_forest.jpg">
<img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg">
<img src="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/04/img_mountains.jpg">
<img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Ví dụ khác
Responsive Image Gallery
Cách sử dụng CSS media để tạo thư viện ảnh đáp ứng trông đẹp mắt trên máy tính để bàn, máy tính bảng và điện thoại thông minh.
