iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

CSS破冰突圍:自學挑戰前端設計 系列

新手自學者從CSS基礎知識開始,逐步挑戰前端設計的各種技巧,快速上手應用,並掌握在實際開發中常見的設計需求。

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 : 拉Bar輕輕一滑精準評分,還能隨意設定評分範圍

靈活自定義隨意設定評分範圍,從滑塊到評分,全都隨心 ##為什麼要有這功能評分拉 Bar 功能能讓使用者透過拖動滑塊的方式,輕鬆選擇評分數值,這在許多互動式網站中...

2024-10-05 ‧ 由 Odelia 分享
DAY 22

Day22 : Margin的相對佈局輕鬆擁有白邊與留白

當需要突破常規佈局,負的 margin 可以讓元素重疊,打造意外的視覺效果。 ##為什麼要有這功能margin 是用來調整 HTML 元素之間的間距的重要屬性。...

2024-10-06 ‧ 由 Odelia 分享
DAY 23

Day 23 : Padding讓內容與邊框更有舒適的距離空間

適當的padding 讓內容不擁擠,是視覺平衡與舒適感的關鍵 ##為什麼要有這功能padding 是網頁設計中不可或缺的一部分,控制元素內容與邊框之間的內部間距...

2024-10-07 ‧ 由 Odelia 分享
DAY 24

Day24 : 邊框也能方變圓:不同角度的圓角控制讓銳利變柔和

不同的圓角設置增加創意,讓設計更生動。 ##為什麼要有這功能border-radius 是一個用來將元素的邊框變成圓角的 CSS 屬性,對於提升頁面設計的柔和度...

2024-10-08 ‧ 由 Odelia 分享
DAY 25

Day25 : box-shadow 陰影成為視覺焦點:打造有深度的網頁效果

有了陰影畫面瞬間變得更有立體感 ##為什麼要有這功能box-shadow 是一個能為元素添加陰影的 CSS 屬性,用來增強網頁設計的深度和立體感,讓元素從頁面中...

2024-10-09 ‧ 由 Odelia 分享
DAY 26

Day26 : 用顯示層級 (display) 打造隱藏世界,管理佈局的空間

display 掌握隱藏與顯示,讓頁面元素如魔法般出現與消失 ##為什麼要有這功能display 是網頁佈局的關鍵屬性之一,它決定了元素在頁面上的顯示方式和佈局...

2024-10-10 ‧ 由 Odelia 分享
DAY 27

Day 27 : 完美填充object-fit調整圖片或其他媒體在容器中顯示

讓圖片自動適應容器尺寸,完美填充不變形 ##為什麼要有這功能object-fit 是調整圖片或其他媒體在容器中顯示方式的重要屬性,當媒體元素(如圖片、影片等)的...

2024-10-11 ‧ 由 Odelia 分享
DAY 28

Day28 : 用CSS讓表格的顏值與功能並存,兼具美觀與實用

懸停互動讓數據動起來;奇偶行顏色交錯,讓大數據表格瞬間更易閱讀。 ##為什麼要有這功能設計表格時,設定其外觀是提升用戶體驗的重要一環。清晰、分明的表格佈局,能讓...

2024-10-12 ‧ 由 Odelia 分享
DAY 29

Day 29 : 表格下拉選單設計:讓選項變得直觀易選

用直觀的設計幫助用戶在多選項中快速選取~ ##為什麼要有這功能表格中的下拉選單 ( 元素) 是處理多選項資料時最常見的互動方式。透過下拉選單,使用者可以快速選擇...

2024-10-13 ‧ 由 Odelia 分享
DAY 30

Day 30: 在自訂義字型中,發掘更具創意的可能性!

##為什麼要有這功能自訂義文字功能允許網頁設計者使用特定的字型,以提升網頁的美觀度和可讀性。使用自訂義字型能使網站在視覺上更具吸引力,增強品牌形象。透過 CSS...

2024-10-14 ‧ 由 Odelia 分享