Tạo thư viện ảnh với CSS - CSS Image Gallery

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    294 lượt xem


Với CSS ta cũng có thể sử dụng để tạo một thư viện hình ảnh đơn giản.

Image Gallery

Thư viện hình ảnh sau được tạo bằng 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="#">      <img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh" width="600" height="400">    </a>    <div class="desc">Mô tả hình ảnh</div>  </div>    <div class="gallery">    <a target="_blank" href="#">      <img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh" width="600" height="400">    </a>    <div class="desc">Mô tả hình ảnh</div>  </div>    <div class="gallery">    <a target="_blank" href="#">      <img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh" width="600" height="400">    </a>    <div class="desc">Mô tả hình ảnh</div>  </div>    <div class="gallery">    <a target="_blank" href="#">      <img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh" width="600" height="400">    </a>    <div class="desc">Mô tả hình ảnh</div>  </div>    </body>  </html>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.