Thư viện hình ảnh CSS
- Trang trước Danh sách rút gọn CSS
- Trang tiếp theo Image sprite CSS
CSS có thể được sử dụng để tạo thư viện hình ảnh.
Cúc tím vàng
Cúc tím đỏ
Cây cối
Cây cối
Thư viện hình ảnh
Dưới đây là thư viện hình ảnh được tạo bằng CSS:
Mô hình
<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="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Thêm mô tả hình ảnh tại đây</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Thêm mô tả hình ảnh tại đây</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Thêm mô tả hình ảnh tại đây</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Thêm mô tả hình ảnh tại đây</div>
</div>
</body>
</html>
Các ví dụ khác
- Thư viện hình ảnh response
- Cách sử dụng truy vấn truyền thông CSS để tạo thư viện hình ảnh响应, trông rất tốt trên máy tính để bàn, máy tính bảng và điện thoại thông minh.
- Trang trước Danh sách rút gọn CSS
- Trang tiếp theo Image sprite CSS
