---
# System prepended metadata

title: 前後端系列 - 用實際例子帶你暸解前端
tags: [課程]

---

###### 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>
```