Part9 使用AJAX方法將色彩名稱傳到後端並寫入資料庫 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 12月 04, 2023 第一步: 建立一個資料庫及資料庫的使用者。第二步: 資料傳送AJAX函式與前端JavaScript程式,新增js/ajax.js。第三步: PHP程式。第四步: 測試是不是能夠用程式碼方式將一個特定色彩名稱傳到後端。第五步: 色彩名稱更新到資料表。第六步: 網頁載入時讀取資料表中的色彩名稱。在index.php加入一段php碼。第七步: 網頁載入讀取資料表裏的色彩名稱。 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 留言
Part7 JavaScript – 主題(theme)的更新(十三週) - 5月 26, 2023 第一步: 做兩個可以打開關掉彈跳視窗的函式,並且套用在兩個按鈕上。 程式碼: 結果: 第二步: 做一個函式來控制打勾和打勾前先消除上一個打勾的圖示,並在每個顏色圖示中呼叫。 程式碼: 結果: 閱讀完整內容
part1(圖片不清楚可點選後放大觀看) - 3月 04, 2023 第一步是在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左欄_今日資料(第三週) - 3月 11, 2023 第一步: 沿用之前第二週的網頁架構。 第二步: 將左欄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... 閱讀完整內容
留言
張貼留言