網頁前端介面設計

第一步: 日曆上的日期根據月份正確的顯示出來，使用閏年的判斷式和迴圈。 程式碼: 套用程式後: 第二步: 接著將上個月的和下個月的日期正確的顯示出來，也是使用迴圈。 程式碼: 套用程式後:

第一步: 使用函式將原本數字顯示改成英文顯示，有星期的還有月份的。 程式碼: 也可使用陣列: 這是之前的結果: 套用函式程式後: 第二步: 將原本14號利用函式改成日期的縮寫，像是3號是這個月的第三天所以是 third， 所以個位數是3的就是rd結尾，為了能讓 縮寫小一點所以設定大小為50% 。 程式碼: 套用函式程式後: 第三步: 接著把取得年份跟日期的程式碼都包裝成一個函式，然後呼叫結果是跟之前一樣的。 程式碼: 第四步: 再把所有script裡的函式都丟到js資料夾裡updateDateinfo.js的檔案中，再使用script連結，原本的html檔就可以呼叫 updateDateinfo.js的檔案中的函式，這樣會使維護程式更容易，結果是一樣的。 程式碼:

第一步: 一開始先加入背景文字background - text。 程式碼: 這是之前的結果: 套用標題程式後: 第二步: 套用程式後會發現背景文字跑到左上角，所以新增了CSS格式設定，讓背景文字跑到中間並且放大跟呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第三步: 接下來要新增右欄月曆的箭頭，所以要加上script標籤來導入箭頭符號，之後加入CSS格式設定將箭頭放大和滑鼠移置箭頭時呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第四步: 要將月曆的某個表格設成灰色背景，我是設在位於第2列、第5行的表格。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第五 步: 要將便利貼貼在表格中，所以我先下載便利貼圖檔放在之前Part2裡images的資料夾，我使用的是note3圖檔， 我是設在位於第3列、第3行的表格，貼上時會太大，所以利用CSS設定將便利貼縮小還有滑鼠移至便利貼時會顯示 這是提示!!! 的文字。 程式碼: 這是之前的結果: 套用CSS格式設定後:

第一步: 先將右欄月曆上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變...