網頁前端介面設計

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

第一步: 繼續將上周的網頁來修改，一開始先將左欄版面加上一點變化，到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...

第一步: 沿用之前第二週的網頁架構。 第二步: 將左欄div區塊、標題、年分、星期、日期、按鈕個別加上id，id可以用來識別每一個標籤，比如年份2023的標籤就可以使用cur-year來代表。 第三步: 這次是將左欄div區塊、標題、年分、日期、按鈕個別加上class，也就是CSS類別的選擇器，標籤要套用相同格式時就可以使用class，像是年份跟星期的class都有指定 default-cursor center，所以 年份跟星期都會套用 default-cursor center之後 的設定。 第四步: 新增style標籤，在裡面可以先放body CSS的格式設定或者其他的格式設定。 第五步: 搜尋 Josefin Sans字型，選擇輕300、常規400、半粗體600、之後就可以套用此字形。 第六步: 之後就可以撰寫body主體的CSS格式設定，像是有 Josefin Sans 字形、margin上下左 右邊距離設為0、 background-color背景為白色、display是 div區域顯示方式， flex是 設置是第一個div區塊為 列 顯示的格式設定和最後 align-items用來排列div區塊， stretch是代表延展的意思，可以使高度填滿父類別的容器 。 這是之前的結果: 套用CSS格式設定後: 第七步: default-cursor是將鼠標移至標題或其他文字時一樣是箭頭， 變成不能選取 。 類別裡有 default-cursor 的都會套用到此設定。 *由 於截圖時鼠標會自動消失所以無法提供結果圖片 第八步: center裡的txet-align代表對齊，而center的格式設定為置中， 類別裡有 center 的都會套用到此設定。 套用CSS格式設定後: 第九 步: 設定按鈕button的類別，border-radius是設定按鈕的圓角屬性，500px代表500像素，outline是代表邊框線 ，none代表沒有邊框線，margin上下左右邊距為0加上自動調整， background-color背景為透明。 套用CSS格式設定後: 第十步: 設定color類別，color類別裡的color是字形設為白色， background-color背景為類似深藍的顏色，套用到color類別的是左欄div板塊，所以整塊 左欄 板塊會套用到。還有off-c...