Part1左欄_今日資料(第四週) + Part2 右欄_月曆(第四週)
第一步:
繼續將上周的網頁來修改，一開始先將左欄版面加上一點變化，到CSS clip-path maker網站上找到自己要的套用的圖形，之後再套用網站上的程式碼，寫在current-day-info，current-day-info是左欄板塊的id。
CSS clip-path maker網站:
套用網站上的程式碼:
這是之前的結果:
第二步:
在網頁前端介面設計中，將複製Part1 左欄_今日資料資料夾，貼在相同目錄中，且更名為Part2 右欄_月曆資料夾，然後在Part2 右欄_月曆資料夾中新增一個css資料夾，再將css資料夾中新增2個css的檔案，名為main.css和current-day.css。
Part2 右欄_月曆資料夾:
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列的意思，如果是column則是行的意思，tr標籤裡有th標籤，th標籤是代表格子的元素，th標籤裡的colspan=7是代表七個格子(行)合在一起的意思，th標籤底下又代表西元年分的標題還有月份的標題，然後下面是另一個tr區塊裡面放了一周七天，剛好是7個格子，每個格子代表星期幾。下面tbody部份全部都是格子組成，總共6列7行所以有6個tr區塊，每個區塊裡有七個td格子元素，代表一周七天，裡面暫時放1，在最後有加上按鈕。
thead部份:
tbody部份:
留言
張貼留言