Part7 JavaScript – 主題(theme)的更新(十三週)
第一步:
做兩個可以打開關掉彈跳視窗的函式，並且套用在兩個按鈕上。
程式碼:
結果:
第二步:
做一個函式來控制打勾和打勾前先消除上一個打勾的圖示，並在每個顏色圖示中呼叫。
程式碼:
結果:
Part1左欄_今日資料(第四週) + Part2 右欄_月曆(第四週)
第一步: 繼續將上周的網頁來修改，一開始先將左欄版面加上一點變化，到CSS clip-path maker網站上找到自己要的套用的圖形，之後再套用網站上的程式碼，寫在 current-day-info， current-day-info是 左欄板塊的id。 CSS clip-path maker網站: 套用網站上的程式碼: 這是之前的結果: 套用CSS格式設定後: 第二 步: 在網頁前端介面設計中，將複製Part1 左欄_今日資料 資料夾 ，貼在相同目錄中，且更名為Part2 右欄_月曆資料夾，然後在 Part2 右欄_月曆資料夾中新增一個css資料夾，再將css資料夾中新增2個css的檔案，名為 main.css和current-day.css 。 Part2 右欄_月曆資料夾: css資料夾: main.css和current-day.css檔案 : 第三步: 將之前放在原本html檔案裡CSS類別和id 格式設定 的程式碼分別剪下貼上至 main.css和 current-day.css 檔案中，再將原本的html檔案儲存後，就會發現變回一開始只有標題的時候，之後可以再加上link標籤可以指定 main.css和current-day.css檔案裡的程式碼加入原本的html檔案中，之後刷新網頁就會回復原本的樣子。 main.css裡的程式碼: current-day.css 裡的程式碼: 只有標題的時候: 加上link標籤: 刷新網頁後: 第四步: 換掉網頁瀏覽器圖示icon，下載圖示後的圖片放在 Part2 右欄_月曆資料夾的新資料夾images中 ，再將程式中加入link標籤，然後就可以換上自己想要的圖示。 下載的圖示: 加上link標籤: 原本的圖示: 現在的圖示 : 第五步: 左欄板塊已經完成，要加上右欄的月曆，跟左欄一樣新增div區塊，id是calendar， 左欄板塊是橫式landscape，右欄月曆是直式portrait，月曆是呈表格狀的，所以要加上table的標籤，table標籤裡面有thead和tbody兩個標籤，網頁結構通常分成head頭、body身體、foot腳，所以thead代表表格的頭，tbody代表表格的身體。 右欄div區塊程式碼 : 第六步: thead裡有tr的標籤，tr標籤的r代表row列的意思，如果是 colum...
留言
張貼留言