效果圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin: 10px auto; width: 80%; height: auto; background-color: #fff351; } .image{ border: 1px solid darkgray; width: auto; height: auto; float: left; text-align: center; margin: 5px; } img{ margin: 5px; opacity: 0.5; } .text{ font-size: 12px; margin-bottom: 5px; } a:hover{ background-color: #ff2235; } </style> </head> <body> <div class="container"> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> <div class="image"> <a href="#" target="_self"> <img src="1.jpg" alt="風景" width="200px" height="200px"> </a> <div class="text">8月份的維多利亞</div> </div> </div> </body> </html>