412 字
2 分鐘
w3.css 網頁模板讓你練習HTML與CSS

由 W3.CSS 所設計的模板,完全免費可以自由的修改來使用,CSS 是使用 W3 的。

網站:w3schools(在新分頁開啟)

W3 設計的模板都滿好看的,有非常多模板可以去體驗看看,點擊試一試可看到編碼。./w3-01.jpg

可以將編碼複製下來存儲成 HTML,但圖片也需要下載,右鍵下載到你的資料夾,並修改圖片位置,往下看動手試試看。
./w3-02.jpg

以美食模板來玩玩,使用 Visual Studio Code 軟體,如果你還沒有 Visual Studio Code 請點我下載。

新建一個檔案後,上一步驟看到的編碼,將編碼全選複製貼上至 Visual Studio Code ,建一個資料夾並請存檔,放資料夾裡面,
存檔快捷鍵為 Ctrl+S 。./w3-02-1.jpg

設定文件語言為 HTML,右下角點選”純文字”。./w3-03.jpg

選純文字後會跳出選單,選擇 HTML。./w3-04.jpg

圖片位置小小修改,請找到 jpg 關鍵字,把 hamburger.jpg 的開頭/拿掉,如 hamburger.jpg,每個 jpg 的開頭/都要拿掉,記得存檔,存檔快捷鍵為 Ctrl+S。 ./w3-04-1.jpg

在剛才創建的資料夾,建立一個為 w3imges,是用來放圖片。./w3-05.jpg

對圖片右鍵另存圖檔,使用的瀏覽器試 Chrome,存放至剛才創建 w3images 裡面,之後可打開看看 html 文件檢查看看是否正常,這樣就完整下來下載了喔。./w3-06.jpg

w3.css 網頁模板讓你練習HTML與CSS
https://aishuafei.com/posts/w3css-網頁模板讓你練習html與css/
作者
愛耍廢
發佈於
2018-12-22
許可協議
CC BY-NC-SA 4.0