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 2

    Bài 23: Bố cục CSS – Thuộc tính display: inline-block

    25/04/2021

    by Trần Thanh · Published 25/04/2021

  • Khoá học CSS 0

    Bài 4: Cách sử dụng CSS

    07/10/2015

    by Phan Tiến · Published 07/10/2015 · Last modified 20/06/2024

  • Khoá học về HTML 0

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

    06/12/2015

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

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