Part2 右欄_月曆(第五週)

第一步:

先將右欄月曆上MyCalendar標題設定為不顯示，此標題的id為app-name-portrait，display設定none，display是代表顯示，none代表無。

套用程式碼:

這是之前的結果:

套用CSS格式設定後:

第二步:

接下來把右欄月曆上的按鈕也設定為不顯示，此按鈕的id為theme-portrait，使用列舉的方法將此id寫在原本標題app-name-portrait的後面，用逗號隔開，就一樣可以跟標題一樣套用display的CSS格式設定。

套用程式碼:

這是之前的結果:

套用CSS格式設定後:

第三步:

開始設定右欄月曆table表格，margin外邊距離上下14pxy、左右兩邊auto置中，padding內距上下7vd、左右設0，border-collapse是決定表格邊框式合在一起還是分開，collapse是代表合在一起，接著設定表格的td、th，border框線設定1px、solid實線、灰色邊框。

套用程式碼:

這是之前的結果:

套用CSS格式設定後:

第四步:

設置右欄月曆的整體板塊，右欄月曆整體板塊id為calendar，width寬度設定66%，min-height最小高度設定100vh，display顯示設定flex，align-items對齊項目設定center，flex- direction彈性方向設定column，justify-content水平置中和垂直置中設定為space-around。

套用程式碼:

這是之前的結果:

套用CSS格式設定後:

第五步:

為了能夠讓2023的標題能夠跟之後的三角形排在同一列，所以多加了CSS的格式設定，first-child是指thead標籤下第一個tr標籤，之後就是calendar下的h4、h3、.weekday類別的CSS設定，只是跟之前差不多的調整。

套用first-child的程式碼:

這是之前的結果:

套用CSS格式設定後:

套用calendar下的h4、h3、.weekday類別的程式碼:

這是之前的結果:

套用CSS格式設定後:

第六步:

將整個表格放大，主要是對tbody標籤裡的td做CSS格式設定，其中transition為轉場效果的設定。hover是滑鼠移置表格時的動作，在這裡是指1字體由0.8vw變大為1.2vw。

套用程式碼:

這是之前的結果:

套用CSS格式設定後:

滑鼠移到表格裡的1時變大的效果，截圖時鼠標會自動消失，但是可以發現1確實有變大: