發表文章

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

第七週作業

圖片
 第一步：將日曆的左邊進行裁切。orientation:可以選擇畫面為直式還是橫式，landscape：將畫面設定橫式，#current-day-info：指定左邊DIV區塊，clip-path:畫面裁切，polygon：多邊形，後面的參數式用來調整圖型。參數的取得可到 https://bennettfeely.com/clippy/ 這個網站 第二步：建立一個css資料夾，然後在此資料夾新增main.css與current-day.css這兩個檔案 第三步：將<style>中所有類別選擇器(開頭有.)的程式碼放到main.css檔案中；所有id選擇器(開頭有#)的程式碼放到current-day.css檔案中 第四步：在index的head中加入link指令，用來連接main.css與current-day.css這兩個檔案 最後的結果畫面：
張貼留言
閱讀完整內容

第四週作業

圖片
 第一步：首先body{}代表的是要對body裡面的東西去做設計，font-family：改變字型，所以這裡我們把字型改成Josefin Sans這個字體，margin：代表的是與邊界的間距，這裡設為0表示與邊界貼齊不留白，background-color：指的是背景顏色，display：指定區塊如何排列，flax代表是彈性，意思是可以依造我們呈現的方式去改變它的排列，align-items：以交錯軸線來做排版，strecth指的是延展，會使內容填滿整個顯示區 第二步：.font{}代表對按鈕的文字去做設計，font-family：改變字型，這裡我們把字型改成Josefin Sans這個字體 第三步：.default-cursor ： 指的是預設指標，也就是我們常見的那個箭頭圖示，下面那行指令是為了不讓月曆的標題被做改變，也是說當用滑鼠去點擊月曆標題是沒有任何反應的 第四步：.center{}對所有calss中有center的元件去做設計，text-align：文字對齊的方式，center：置中，也就是說月曆所有標題都會置中排列 第五步：再來要對button進行設計，border-radius：指的是區塊的邊角，500px：是為了要讓邊角有弧度的感覺進而變成陀圓狀，outline：當滑鼠移置上面時會產生一個外框的東西，none：指的是無的意思，margin：指的是外距而0 auto代表上下的間距為0、左右的間距為預設值，background-color：為背景顏色，Transparent：透明的意思 第六步：color：指的是顏色，這裡我們將整個月曆的文字設為象牙白然後背景色為藍色 第七步：border-color：指的是邊界的顏色，這裡我們和背景色一樣設成藍色 第八步：off-color：指的是跳色，簡單來說就是白色混藍色，目的是為了呈現立體感 第九步：#current-day-info：指的是對id中有current-day-info的元件去做設計，width：為寬度，34%為佔整個可視區的比例，min-height：為最低高度，vh：指的是佔整個可視區的高度比 第十步：#current-day-info #app-name-landscape ：指的是id為app-name-landscape 的元件去做設計，font-size：為字體的大小，6.2vh：指的
張貼留言
閱讀完整內容

第三週作業

圖片
 第一步：將<body>中每一個標籤加上id和class，目的為之後使用CSS進行格式時指定哪些地方去做改變。id：用來辨識一個元素的名稱、代號，必須是唯一，像是身分證一樣；class：相同性質的標籤元素。 id和class設定名稱解釋(逐行說明，重複地不再贅訴)： current-day-info：此區塊為今日資訊，color：顏色顯示 app-name-landscape：橫式顯示也能夠直視顯示，off-color：跳色產生漸層效果 default-cursor：讓鼠標變化維持為箭頭形狀，意指不能對此區域做任何操作 center：置中 cur-year：今年，current-day-heading：今日版塊標題文字設定 cur-day：星期 cur-month：今月 cur-date：今日 theme-landscape：主體對話方塊 font：字型 button：按鈕元素 第二步：前往google font，選擇Josefin Sans字型 第三步：選取300、400、600線條 第四步：複製下圖紅色框框的程式碼並放到<head>中 第五步：將<body>字體設定為Josefin Sans 第六步：在<style>打上下圖方程式   最後的結果畫面：
張貼留言
閱讀完整內容