Part3 彈出視窗 (Modal) 主題顏色選擇與記事對話方塊(第十二週)

-

第一步:

背景改成透明黑的背景，接著加上彈出視窗的標題字。

程式碼:



第二步:

加上彈跳視窗的背景白色和CSS格式設定。

程式碼:




第三步:

加上按鈕和打勾。

程式碼:



最後完成結果:



留言

張貼留言

這個網誌中的熱門文章

part1(圖片不清楚可點選後放大觀看)

-
圖片
第一步是在vscode開啟一個資料夾，資料夾名為網頁前端介面設計。 第二步是在網頁前端介面設計資料夾裡建立part1資料夾，然後在part1資料夾中建立index.html的檔案。 第三步是開始建立html的文件架構，使用驚嘆號加Tab鍵。 第四步是在body裡面新增div區域，並且新增標題 U110B128 Calender 和h1的大小。 第五步是開啟儲存後的html檔案，預設是開啟是Chrome瀏覽器，然後會發現確實有 U110B128 Calender 的標題。 第六步是在div區域裡再新增兩個div區域分別來放西元年和星期幾、幾月幾號。西元年是h2大小，星期幾、幾月幾號是h1大小。 第七步是刷新剛才開啟檔案的頁面，可以看到新增了西元年和星期幾、幾月幾號。 第八步是再次新增div區域來放按鈕，type類型為button是單純的按鈕功能，name為按鈕的名稱，按鈕上設定顯示Change Theme。 第九步是再次刷新頁面，這次可以看到多了一個按鈕，按鈕名稱為Change Theme。
閱讀完整內容

Part1左欄_今日資料(第三週)

-
圖片
第一步: 沿用之前第二週的網頁架構。 第二步: 將左欄div區塊、標題、年分、星期、日期、按鈕個別加上id，id可以用來識別每一個標籤，比如年份2023的標籤就可以使用cur-year來代表。 第三步: 這次是將左欄div區塊、標題、年分、日期、按鈕個別加上class，也就是CSS類別的選擇器，標籤要套用相同格式時就可以使用class，像是年份跟星期的class都有指定 default-cursor center，所以 年份跟星期都會套用 default-cursor center之後 的設定。 第四步: 新增style標籤，在裡面可以先放body CSS的格式設定或者其他的格式設定。 第五步: 搜尋 Josefin Sans字型，選擇輕300、常規400、半粗體600、之後就可以套用此字形。 第六步: 之後就可以撰寫body主體的CSS格式設定，像是有 Josefin Sans 字形、margin上下左 右邊距離設為0、 background-color背景為白色、display是 div區域顯示方式， flex是 設置是第一個div區塊為 列 顯示的格式設定和最後 align-items用來排列div區塊， stretch是代表延展的意思，可以使高度填滿父類別的容器 。 這是之前的結果: 套用CSS格式設定後: 第七步: default-cursor是將鼠標移至標題或其他文字時一樣是箭頭， 變成不能選取 。 類別裡有 default-cursor 的都會套用到此設定。 *由 於截圖時鼠標會自動消失所以無法提供結果圖片 第八步: center裡的txet-align代表對齊，而center的格式設定為置中， 類別裡有 center 的都會套用到此設定。 套用CSS格式設定後: 第九 步: 設定按鈕button的類別，border-radius是設定按鈕的圓角屬性，500px代表500像素，outline是代表邊框線 ，none代表沒有邊框線，margin上下左右邊距為0加上自動調整， background-color背景為透明。 套用CSS格式設定後: 第十步: 設定color類別，color類別裡的color是字形設為白色， background-color背景為類似深藍的顏色，套用到color類別的是左欄div板塊，所以整塊 左欄 板塊會套用到。還有off-c...
閱讀完整內容