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

-

第一步:

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

程式碼:



第二步:

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

程式碼:




第三步:

加上按鈕和打勾。

程式碼:



最後完成結果:



留言

張貼留言

這個網誌中的熱門文章

Part9 使用AJAX方法將色彩名稱傳到後端並寫入資料庫

-
圖片
  第一步:  建立一個資料庫及資料庫的使用者。 第二步:  資料傳送AJAX函式與前端JavaScript程式， 新增js/ajax.js 。 第三步:  PHP程式。 第四步:  測試是不是能夠用程式碼方式將一個特定色彩名稱傳到後端 。 第五步:  色彩名稱更新到資料表。 第六步:  網頁載入時讀取資料表中的色彩名稱。在index.php加入一段php碼。 第七步:   網頁載入讀取資料表裏的色彩名稱。
閱讀完整內容

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。
閱讀完整內容