Trang chủ
CSS
Thư viện hình ảnh CSS
Tryit: Ví dụ về thư viện hình ảnh đáp ứng
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> div.gallery { border: 1px Solid #ccc; } div.gallery:hover { border: 1px Solid #777; } div.gallery img { chiều rộng: 100%; chiều cao: tự động; } div.desc { phần đệm: 15px; căn chỉnh văn bản: giữa; } * { kích thước hộp: hộp viền; } . responsive { phần đệm: 0 6px; nổi: trái; chiều rộng: 24,99999%; } @media chỉ có màn hình và (max-width: 700px) { . responsive { width: 49.99999%; lề: 6px 0; } } @media chỉ có màn hình và (max-width: 500px) { . responsive { width: 100%; } } .clearfix:after { nội dung: ""; hiển thị: bảng; rõ ràng: cả hai; } </style> </head> <body> <h2>Thư viện hình ảnh đáp ứng</h2> <h4>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</h4> <div class="Response"> <div class= "gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" Height="400"> </a> < div class="desc">Thêm mô tả về hình ảnh tại đây</div> </div> </div> <div class="Response"> <div class="gallery"> <a target="_blank" href ="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" Height="400"> </a> <div class="desc">Thêm mô tả cho hình ảnh đây</div> </div> </div> <div class="Response"> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights .jpg" alt="Northern Lights" width="600" Height="400"> </a> <div class="desc">Thêm mô tả về hình ảnh tại đây</div> </div> </div > <div class="Response"> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600 " Height="400"> </a> <div class="desc">Thêm mô tả về hình ảnh tại đây</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <p>Ví dụ này sử dụng truy vấn phương tiện để sắp xếp lại hình ảnh trên các kích thước màn hình khác nhau: đối với màn hình rộng hơn 700px, nó sẽ hiển thị bốn hình ảnh cạnh nhau, đối với màn hình nhỏ hơn 700px, nó sẽ hiển thị hai hình ảnh cạnh nhau. Đối với màn hình nhỏ hơn 500px, hình ảnh sẽ xếp chồng theo chiều dọc (100%).</p> <p>Bạn sẽ tìm hiểu thêm về truy vấn phương tiện và thiết kế web đáp ứng sau trong Hướng dẫn CSS của chúng tôi.</p> </div> </ cơ thể> </html>