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

    130 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.

Advertisement

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

Tin tức mới

Tin tức thú vị

Nhà tài trợ: