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.

Các thẻ: CSS Image GalleryThư viện hình ảnh trong cssTìm hiểu CSS Image Gallery

  • Bài tiếp Bài 34: Hình ảnh Sprites trong CSS
  • Bài trước Bài 32: Dropdowns trong CSS

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

  • Khoá học CSS 0

    Bài 10: Mô hình hộp (Box Model) trong CSS

    29/11/2019

    bởi Trần Thương · Published 29/11/2019 · Last modified 21/02/2023

  • Khoá học về HTML 0

    Bài 13: Định kiểu HTML với CSS

    06/12/2015

    bởi Trịnh Hồng · Published 06/12/2015 · Last modified 08/06/2024

  • Khoá học CSS 0

    Bài 14: CSS Icons (Thêm biểu tượng vào trang web)

    07/02/2020

    bởi Trần Thương · Published 07/02/2020

Để 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