※ 卡片式設計：
好處：採用卡片式設計能有效簡化使用者介面，提升視覺層次感，讓使用者在瀏覽時更能聚焦於核心資訊，如文字與圖片。
排版範例：
※ thumbnail：
※ 常見的商品卡片：
※ 切版起手式：
留言
留言分享你的想法！
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
奧莉薇走在成為後端工程師之路上的其他內容
2025/07/22
※ 網頁開發前必做的初始化：
目的：
統一不同瀏覽器的預設樣式。
建立一致的視覺基底。
減少意外排版問題。
※ 初始化有兩種：
※ reset.css操作：
網址：https://meyerweb.com/eric/tools/css/reset/
複製內容：
專案內容開啟新的檔案
2025/07/22
※ 網頁開發前必做的初始化：
目的：
統一不同瀏覽器的預設樣式。
建立一致的視覺基底。
減少意外排版問題。
※ 初始化有兩種：
※ reset.css操作：
網址：https://meyerweb.com/eric/tools/css/reset/
複製內容：
專案內容開啟新的檔案
2025/07/22
※ Display介紹：
說明：展示的屬性的意思，就是來決定元素在瀏覽器中如何呈現的方式。
※ Display展示屬性：
有以下幾種設定：
block：在預設的情況下，div和paragraph的標籤預設的display都是block。
inline-block：讓元素可以排在同一個行內的
2025/07/22
※ Display介紹：
說明：展示的屬性的意思，就是來決定元素在瀏覽器中如何呈現的方式。
※ Display展示屬性：
有以下幾種設定：
block：在預設的情況下，div和paragraph的標籤預設的display都是block。
inline-block：讓元素可以排在同一個行內的
2025/07/22
※ 樣式規則：
規則一：
名稱一樣，後寫的樣式會寫掉前面的樣式。
範例一：
前面的樣式：
.color5 {
background-color: #F3D4D4;
height: 300px;
}
顯示畫面：
後面的樣式：
.color5 {
background-col
2025/07/22
※ 樣式規則：
規則一：
名稱一樣，後寫的樣式會寫掉前面的樣式。
範例一：
前面的樣式：
.color5 {
background-color: #F3D4D4;
height: 300px;
}
顯示畫面：
後面的樣式：
.color5 {
background-col