發表文章

目前顯示的是 11月, 2022的文章

第十一週作業

圖片
 第一步：整理檔案到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個代表不同顏色的小區塊 第六步：設定顏色選擇對話方塊的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黑色的實線 最後的結果畫面：
張貼留言
閱讀完整內容

第十週作業

圖片
 第一步：將月曆中的某一格背景顏色改成灰色，先在某一個<td>給予一個名為current-day的id，然後在<style>中將背景的顏色改為灰色 第二步：加入便利籤圖示到月曆表格中，先將圖片下載到images資料夾中，然後在某個<td>中加入下圖指令，img src="images/note1.png"：從images資料夾中找到note1這個圖檔，alt：替代性文字，當圖片消失時會用文字來代替 第三步：設定圖片格式，width：寬度，vertical-align：對齊方式，top：頂端，position: relative：位置為相對位置，top: 0.5vw：距離上方0.5vw 第四步：在便利貼圖標籤右邊加上提示語，在加入圖片的<td>中給予一個class和span，span：標籤 第五步：設定span格式，display: none：不顯示，cursor: help：當游標移至上方時會出現問號，position: relative：設置這裡為位置的參考點，display: block：以區塊方式顯示，font-size：字體線條粗細，paddin：內距，white-space: pre-wrap：不合併連續的空白,超過欄位寬度的部分會自動換行，width：寬度，z-index: 100：顯示在最上層，background-color: #EDEDED：背景顏色為象牙白，color: black：字體顏色為黑色，border-radius：圓角，left: 2vw：離左方2vw；top: 4vw：離上方4vw，position: absolute：以絕對方式定位此元素的位置，從剛設定的參考點往下4vw往右2vw為此元素的起點 最後的結果畫面：
張貼留言
閱讀完整內容

第九週作業

圖片
 第一步：將月曆下方的按鈕隱蔽(不顯示)，display：顯示，none：不顯示 第二步：設定月曆中每一個格子(日期)的邊界，margin：外距，分別為上下14px；左右為自動，padding：內距，分別為上下7vh；左右為0，border-collapse:collapse; 邊框合併為單一邊框，solid：實線 第三步：將月曆移至畫面右半部，width: 66%：寬度占整個畫面總寬度的66%，min-height：最小高度，flex：彈性，隨著畫面大小改變而改變排版，align-items: center 對齊交錯軸線中央，flex-direction: column：在此區塊裡的元素以直行方式作排列，justify-content: space-around：在此區塊裡的元素四邊設置相等空白的方式來排列 第四步：調整月曆上半步，#calendar thead tr:first-child th div：月曆表格中2個tr中的第一個tr，justify-content: center：此區塊中的元素置中對齊 第五步：調整月曆文字大小，font-size：字體大小，font-weight：字體線條粗細，inline-block：依照元素中的內容來決定寬高，! important：限制子元素不能覆寫此css格式設定 第六步：將月曆放大，vertical-align: top：垂直方向對齊：向上，transition: font-size .6s ease：滑鼠移置上頭會進行換場，0.6秒字體大小會從0.8變1.2，轉場模式為：ease 第七步：加入背景文字，position: absolute：在上層標籤元素的絕對位置，opacity：透明度，z-index：重疊排序，top：與上方距離設置；left：與左方距離設置，transform: translate(-50%, -50%)：向X軸移動-50%距離；向Y軸移動-50%距離 第八步： 加入月份導覽符號，到Font Awesome網站找到caret圖示，然後將連結加入head中 第九步：將caret符號放在想要的位置，放置在January的左右側 第十步：調整icon格式 最後的結果畫面：
張貼留言
閱讀完整內容

第八週作業

圖片
 第一步：將月曆的網頁名稱改成My Calendar 第二步：新增網頁瀏覽器圖示，先在「Part 1 左欄 今日資料」這個資料夾中新增一個資料夾並命名為「image」然後將圖示下載至此 第三步：打上下列程式碼即可新增網頁瀏覽器圖示，link：連結到我們指定的檔案，type：檔案的類型，sizes：圖示的大小 第四步：將「Part 1 左欄 今日資料」資料夾複製並改為「Part 2 右欄  月曆表格」，目的是之後出現問題時可以還原到先前的資料 第五步：新增月曆表格，先用vs code 開啟「Part 2 右欄  月曆表格」，再來先製作月曆head的部分。先將整個右欄的部分給予一個id：Calendar，app-name-portrait：指的是月曆的呈現方式是直式的，colspan=7：將7個格子合併成一列，<tr>：為一行列，<th>在行列中劃分一個格子 第六步：製作月曆body的部分。先整個body一個id="table-body"：表格的身體(內容)和class="border-color"：邊線的顏色，<tr>：為一行列，<td>在行列中劃分一個格子，<tr>到</tr>的步驟重複七次，最後呈現的結果會變成有六列，每一列中有七個格子，並且在每個格子中都會有一個1，剛好符合平時常見的月曆樣式。 最後的結果畫面：
張貼留言
閱讀完整內容