前後端系列 - 用實際例子帶你暸解前端

###### tags: `課程` # 前後端系列 - 用實際例子帶你暸解前端 [TOC] ## 安裝 VScode 相關的Extension ## 開始！ 1. 創新資料夾在桌面創建一個新的資料夾 2. 打開 VScode 打開 VScode > 檔案 > 開啟資料夾，將剛才創建的資料夾打開，創建一個新的檔案 `index.html` 3. 創建 HTML 格式在 `index.html` 中按下 `!`，按下 `tab` 在 `<head>` 中間加入一個 `<style>` ，等等的步驟會用到 :::info Emmet：用來快速生成HTML ::: 4. 加入 body 在 `body` 中輸入 `.login` ，按下 tab，他會自動幫你補全成： ```htmlmixed <body> <div class="login"></div> </body> ``` 5. 在 `style` 中加入 css 的 class 找到一張圖片加入 `background-image` 中，變成頁面的背景圖片 ```css .login{ background-image: url("img/100011.jpg"); } ``` 6. 開啟`index.html`，到瀏覽器的畫面，滑鼠右鍵＋檢視（inspect），點選左上角的功能 ![](https://i.imgur.com/G1MqKNY.png) 7. 修改背景圖片大小在 `head` > `style` > `.login` 中，加入 `width` 以及 `height` 標籤 ```css= .login { background-image: url(img/100011.jpg); width: 100vw; height: 100vh; } ``` 8. 背景不要有白邊，改掉margin ```css html, body{ margin: 0; } ``` 9. 調整背景圖片我們希望圖片不要重複，所以加上 `background-repeat: no-repeat;` 將圖片的大小改成 `background-size: cover;` 然後讓圖片在中間 `background-position: center;` ```css= .login { background-image: url(img/100011.jpg); width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; } ``` 10. 放入表格 emmet小技巧`input*2` => 在按下Tab ```html <input type="text"><input type="text"> ``` 將第一個輸入框作為輸入帳號的地方，第二個輸入框作為輸入密碼的地方，再加入第三個 `input` 的標籤，將其 `type` 改為 `submit` :::info 連續選取多行小工具 Win `Ctr + Atl` 或 `Ctr + D` mac `Command + D` ::: 將第一、二個 `input` 加入 `placeholder`，作為使用者還未輸入時的提示語 ```htmlmixed! <form action=""> <input placeholder="帳號" type="text"> <input placeholder="密碼" type="password"> <input type="submit"> </form> ``` 11. 加入背景卡我們要在輸入框後面加入一個白色的背景卡，所以在 `style` 的地方加入 `form` 的 `css` 樣式 ```css= form { width: d-color: white; } ``` 12. 將白色小卡置中如果只是 `left: 50%`, `top: 50%`，可能會跟我們預期的置中不一樣 (因為定位是在左上角) 所以要使用 `calc()` 來計算出小卡的中心點 (把多的部分扣回來) ```css= form { width: 400px; height: 500px; background-color: white; position: relative; left: calc(50% - 200px); top: calc(50% - 250px); } ``` 圓角、模糊 ```css= form { width: 400px; height: 500px; background-color: #ffffff8a; position: relative; left: calc(50% - 200px); top: calc(50% - 250px); backdrop-filter: blur(20px) saturate(100%); border-radius: 30px; } ``` input 欄 ```css= input[type="text"], input[type="password"] { border-color: #2f7bf2; width: calc(100% - 60px); border-top: none; border-left: none; border-right: none; border-width: 3px; background: transparent; padding-bottom: 10px; font-size: 16px; outline: none; } ``` padding: 內距 margin: 外距 ![](https://i.imgur.com/esNgBAp.png) padding, margin 可以打多組(數字) 一組：套用所有方向兩組：上下跟左右四組：上下左右 submit button ```css= input[type="submit"] { background-color: #2f7bf2; color: white; padding: 15px 30px; border-radius: 38102389123px; border: none; } ``` (講師說 fcc 是 display: flex 水平置中垂直置中) 寫完之後，套用到想要加的地方，就可以生效了要加在想要置中的爸爸物件上 (class="fcc") ```css= .fcc{ display: flex; justify-content: center; align-items: center; } ``` 所以將 `class="fcc"` 加在 `form` ，但發現這樣不會是我們想要的結果 fcc 只會影響到下一層的最上面的小孩，所以要用 div 把它包起來 class 像是標籤，可以同時有很多個 class (用空格分開) ## 完整 code： ```htmlembedded <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blabla</title> <style> body { margin: 0; } .fcc { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .login { background-image: url(./img/wallpaper.jpeg); width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; } form { width: 400px; height: 500px; background-color: #ffffff8a; position: relative; left: calc(50% - 200px); top: calc(50% - 250px); backdrop-filter: blur(20px) saturate(180%); border-radius: 30px; } form input[type="text"], form input[type="password"] { border-color: #2f7bf2; width: calc(100% - 60px); border-top: none; border-left: none; border-right: none; border-width: 3px; background: transparent; padding-bottom: 10px; font-size: 16px; outline: none; } form input[type="submit"] { background-color: #2f7bf2; color: white; padding: 10px 30px; border-radius: 9878123123123px; border: none; } .login .field { height: 200px; } .login .mess { width: 100%; padding: 30px; } </style> </head> <body> <div class="login"> <form action="" class="fcc"> <div class="mess"> <h2>It can work, fine!!</h2> <p>NTUST GDSC blabla</p> </div> <div class="fcc field"> <input placeholder="帳號" type="text"> <input placeholder="密碼" type="password"> <input type="submit"> </div> </form> </div> </body> </html> ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.