Chia Yi Lai

網頁版日曆

  • 主要分成三個區塊,黑色的襯底板,紅色的頭板顯示月份,白色的紙張顯示日期。
  • 對齊的方式因為都是單行,直接用 text-align: center 水平置中,line-height = 區塊高度來垂直置中。
  • 月份字體大小設為紅板的一半,黑色日期字體大小設為白紙的 2/3。
  • 自訂 SASS 的變數 $base-size 方便修改日曆大小。
  • 用 JS 把今天的月份日期帶入 HTML。getMonth() 會是 0-11 的數字,所以需自訂一個陣列將其換成英文縮寫。
  • 再判斷如果是星期日或六時,在 base 加上 weekend class,用來設定日期顏色變紅色。

See the Pen Calendar by Chia Yi Lai (@ChiaYiLai) on CodePen.

keyboard_arrow_up