簡介
我們的目標是什麼?
使用語意 HTML5 建構結構
使用現代 CSS 加入樣式
- 重置CSS
- 使用 Flexbox 設計卡片佈局
- 設計卡片圖像
- 設計卡片內容
- 設計卡片按鈕
- 增加懸停過渡
- 使用 CSS 變數
結論
身為 Web 開發人員,我們經常遇到建立卡片元件的需要。無論是產品/項目展示、用戶個人資料還是部落格文章,卡片無處不在。
過去,創建響應式佈局是一項挑戰。由於現代 CSS 技術,特別是 CSS Flexbox 的出現,這些設計的創建變得更加簡單和直覺。
Flexbox 簡化了建立響應式佈局的過程。我們可以輕鬆地在容器中排列、對齊和間隔項目,而無需使用複雜的媒體查詢。這意味著我們可以建立完美適應不同螢幕尺寸和方向的佈局,而無需指定確切的斷點。
目標是透過使用 CSS Flexbox 來建立等高的響應式卡片,而不依賴斷點。我們將確保每張卡片無論內容長度如何都保持相同的高度,無縫適應不同的螢幕尺寸。
版面的關鍵 CSS 屬性:
現在讓我們透過建立卡片來探索 CSS Flexbox 的魔力!
<main class="card-container"> <!-- First card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title one</h2> <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p> <button class="card-button" aria-label="Read more about Title one">Read More</button> </article> <!-- Second card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title two</h2> <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p> <button class="card-button" aria-label="Read more about Title two">Read More</button> </article> <!-- Third card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title three</h2> <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p> <button class="card-button" aria-label="Read more about Title three">Read More</button> </article> </main>
/* Basic CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; }
/* Ensure that our layout is centred horizontally and vertically on the page */ body { display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */ justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; /* Prevent horizontal scrolling */ }
/* Cards */ .card-container { display: flex; /* using CSS flexbox to display each card at the centre */ justify-content: center; align-items: stretch; /* use stretch for equal height of all cards */ gap: 1.5625rem; /* add space between each card */ flex-wrap: wrap; padding: 1rem; max-width: 100%; /* Prevent container from exceeding viewport width */ } .card { display: flex; flex-direction: column; width: 20rem; background-color: #fff; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); text-align: center; text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */ overflow: hidden; }
.card-image { width: 100%; height: auto; object-fit: cover; margin-bottom: 0.85rem; }
.card-title { font-size: 1.25rem; padding: 1rem; color: #3ca69f; } .card-description { flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */ padding: 0 1rem 1rem; font-size: 0.975rem; line-height: 1.5; }
/* Cards button */ .card-button { align-self: center; /* placing the button at the center */ margin: 1rem 0 3rem; padding: 0.625rem 1rem; font-size: 1rem; color: #ffffff; background-color: #3ca69f; border: none; border-radius: 0.3125rem; cursor: pointer; }
.card { transition: 0.5s ease all; } .card-button { transition: 0.5s ease all; } /* cards hover effect */ .card:hover { background-color: #276662; color: #ffffff; } .card:hover > .card-button { background-color: #ffffff; color: #276662; font-weight: 700; } .card:hover > .card-title { color: #ffffff; }
/* Declare variables */ :root { --primary-color: #3ca69f; --secondary-color: #276662; --text-color: #ffffff; --shadow-color: rgba(0, 0, 0, 0.4); --border-radius: 0.3125rem; --spacing: 1rem; --transition-duration: 0.5s; }
回頂端
以上是使用現代 CSS 建立響應式等高卡片(Flexbox 的魔力和無媒體查詢)的詳細內容。更多資訊請關注PHP中文網其他相關文章!