Bài 33: Thư Viện Hình ảnh Trong CSS | Tìm ở đây

Trang chủ » Thư Viện Html Css » Bài 33: Thư Viện Hình ảnh Trong CSS | Tìm ở đây

Có thể bạn quan tâm

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.

Tags: CSS Image GalleryThư viện hình ảnh trong cssTìm hiểu CSS Image Gallery

  • Next story Bài 34: Hình ảnh Sprites trong CSS
  • Previous story Bài 32: Dropdowns trong CSS

You may also like...

  • Khoá học CSS 0

    Thứ tự ưu tiên và tối ưu CSS

    18/06/2019

    by Phan Tiến · Published 18/06/2019 · Last modified 27/07/2019

  • Khoá học CSS 0

    Bài 29: Thanh điều hướng – Navigation Bar trong CSS

    24/05/2021

    by Trần Thanh · Published 24/05/2021

  • Khoá học CSS 0

    Bài 34: Hình ảnh Sprites trong CSS

    29/05/2021

    by Trần Thanh · Published 29/05/2021

Để lại một bình luận Hủy

Bạn phải đăng nhập để gửi bình luận.

Từ khóa » Thư Viện Html Css