好看相簿樣式語法

好看的相簿樣式語法可以通過HTML和CSS來實現，以下是一個簡單的範例：

HTML部分

<div class="photo-album">
    <div class="photo">
        <img src="image1.jpg" alt="Image 1">
        <p>描述文字 1</p>
    </div>
    <div class="photo">
        <img src="image2.jpg" alt="Image 2">
        <p>描述文字 2</p>
    </div>
    <div class="photo">
        <img src="image3.jpg" alt="Image 3">
        <p>描述文字 3</p>
    </div>
</div>

CSS部分

.photo-album {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.photo {
    width: 30%;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.photo:hover {
    transform: scale(1.05);
}

.photo img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}

.photo p {
    padding: 10px;
    font-size: 16px;
    color: #333;
}

說明

1. HTML結構：使用<div>來包裹每張照片和描述文字，並將所有照片放在一個容器中。
2. CSS樣式：
   • display: flex：讓照片排列成一行，並自動換行。
   • box-shadow：為每張照片添加陰影效果。
   • border-radius：讓照片的邊角變圓。
   • transition：讓照片在滑鼠懸停時有放大效果。
   • text-align: center：讓描述文字居中顯示。

這個範例可以根據需求進一步調整，例如改變照片的尺寸、間距或添加更多的動畫效果。