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.
img_gallery

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.

Có thể bạn sẽ thích…

Trả lời