發表文章

第十七週作業

圖片
第一步：月曆左邊響應式處理：orientation: portrait：直式排列，flex-direction: column：排列方式由上而下，width：寬度，min-heigh：最小高度，initial：瀏覽器的預設值，height：高度，padding: 1vw 0：內距：上下1vw、左右：0，display: flex：彈性的方式顯示，align-items: center 對齊交錯軸線中央，justify-content: center 對齊主軸線中央，flex-direction: column; 交錯軸線位置與主軸線位置調換，因此內容物呈現直向排列，font-size：字體大小，display: none：不顯示，display: inline：元素可在同一行內呈現，圖片或文字均不換行，padding: 0：內距，四周皆為0，margin: 0 4px：外距，上下0、左右4px 第二步：月曆的響應式處理，width：寬度， display: block：元素寬度預設會撐到最大，margin-top：外距，上方，margin: 0：外距，四周皆為0，font-size：字體大小，padding: 1.2vw 0 0.2vw：內距，上1.2vw、左右0、下0.2vw，height：高度，top：距離上方，border: none：邊線不顯示 最後的結果畫面：       第三步：對話方塊的響應式處理，width：寬度，padding: 6px 16px：內距，上下6px、左右16px，border-width：邊線寬度，height：高度，font-size：字體大小 最後的結果畫面：                                                                             
張貼留言
閱讀完整內容

第十三週作業

圖片
 第一步：改變色彩選擇方塊的外型，先到 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：字體大小 最後的結果畫面：
張貼留言
閱讀完整內容

第十一週作業

圖片
 第一步：整理檔案到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，剛好符合平時常見的月曆樣式。 最後的結果畫面：
張貼留言
閱讀完整內容