第十一週作業
第一步：整理檔案到css，新增一個名為calendar檔案，將<style>中的程式碼放在裡面，在<head>中打上連接到calendar檔案的指令
第二步：將Part 2 右欄 月曆表格的資料夾複製，並將複製的資料夾改為Part 3 色彩對話方塊
第三步：加入一個對話方塊，dialog：對話方塊
第四步：設定對話方塊css格式，height：高度，width：寬度，border: none：邊線，不顯示，
padding: 0：內距，四邊皆為0，background-color：背景顏色，rgba(29, 29, 29, 0.85)：rgb是用來調色彩的，a為透明度，最後會呈現灰色玻璃紙的效果
第五步：加入顏色選擇對話方塊，先新增一個div(區塊)然後給予id="fav-color"，之後再新增一個標題為What's your favorite color?，popup：彈出，然後在標題下加入(color-options"：顏色選擇)的區塊並在之中放入12個代表不同顏色的小區塊
第五步：加入顏色選擇對話方塊，先新增一個div(區塊)然後給予id="fav-color"，之後再新增一個標題為What's your favorite color?，popup：彈出，然後在標題下加入(color-options"：顏色選擇)的區塊並在之中放入12個代表不同顏色的小區塊
第六步：設定顏色選擇對話方塊的css格式，position: absolute：位置為絕對位置，display: flex：彈性的方式顯示，flex-direction: column：由上而下排列，align-items: center：垂直的置中對齊，width：寬度，margin: 0 auto：外距，上下為0；左右為自動，background-color: #FEFDFD：背景顏色為象牙白，border-radius：圓角，top: 50%;left: 50%;：距離上方50%左方50%，transform: translate(-50%, -50%)：整個區塊往左50%、往上50%
第七步：設定顏色選擇對話方塊標題的css格式，margin: 32px 0 18px：外距，上32px、左右0、下18px，font-size：字體大小，calc：計算功能，font-weigh：字體線條粗細，padding: 0 2vw 2px：內距，上0、左右2vw、右2px，border-bottom: 1px solid #222：在邊線的下方設置1px黑色的實線
最後的結果畫面：
留言
張貼留言