網頁前端介面設計

 第一步：改變色彩選擇方塊的外型，先到 https://bennettfeely.com/clippy/ 這個網頁找到想要的圖是在複製程式碼放到月曆的程式中就好 第二步：進行備份，將「Part 3 色彩對話方塊」資料夾複製並改為「Part 4 記事對話方塊」 第三步：隱藏色彩對話方塊 第四步：加入記事對話方塊，popup：彈出，textarea：對話方塊，將兩個button放在div裡面會變成橫向排列，若沒有放在div裡會變直向排列 第五步：設置記事對話方塊css格式，h4設定標題文字的部分，margin: 32px 0 18px：外距，上32px、左右0、下18px，font-size：字體大小，calc：計算，font-weight：字體線條粗細。#edit-post-it：設定輸入文字框框的部分，height：高度，width：寬度，padding: 14px：內距，四邊皆為14px，border: 1px solid #D8D8D8：在邊線設置1px白色實線，border-radius：圓角，outline：邊線，none：設定為無，resize：調整大小 第六步：設置記事對話方塊按鈕css格式，display: inline：元素可在同一行內呈現，圖片或文字均不換行，margin: 24px 0 20px：外距，上24px、左右0、下20px，padding: 10px 26px：內距，上下10px、左右26px，font-size：字體大小，calc：計算，font-weight：字體線條粗細，border：邊線，solid：實線，hover：當滑鼠移至上面時會有轉場特效(將此格式套用上去)，color：文字顏色，background-color：背景顏色 第七步：整理<style>中的內容，在css中新增modal.css檔案，並將<style>中的程式碼移至此檔案中，再加入連結到modal.css檔案的程式 最後的結果畫面：

 第一步：將對話方塊內的文字改為橫向排列，width：寬度，margin: 0 10px：外距，上下0、左右10px，display: flex：彈性的方式顯示，flex-direction: row：橫向排列，wrap：跳行，justify-content: center：區塊置中對齊 第二步：調整對話方塊文字，margin：外距，font-size：字體大小，clac：計算，font-weight：字體線條粗細，text-align: center：文字置中對齊，display: flex：彈性的方式顯示，flex-direction: column：由上而下排列，align-items: center：橫向置中對齊 第三步：加入色塊，width：寬度，clac：計算，height：高度，padding: 0：內距，上下左右皆為0，border-radius: 100%：圓角，這裡會變成一個圓型，display: flex：彈性的方式顯示 第四步：新增一個按鈕，margin: 24px 0 20px：外距，上24px、左右0、下20px，padding: 10px 26px：內距，上下10px、左右26px，font-size：字體大小，clac：計算，font-weight：字體線條粗細，border：邊線，solid：實線，hover：滑鼠移置上方會有轉場效果，color：字體顏色，background-color：背景顏色 第五步：加上勾選符號，先到Font Awesome網站找到需要的圖示代碼然後放到程式碼裡，color：字體顏色，font-size：字體大小 最後的結果畫面：