###### tags: `前後端系列`, `課程`
# 11/17 前後端系列 - 用實際例子帶你暸解前端
[TOC]
## 課程實作目標
## 安裝
- VS Code
- Google Chrome
## 開始！
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），點選左上角的功能
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小技巧`form` => 直接生出form
```html
<form>
</form>
```
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: 400px;
height: 500px;
background-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);
}
```
圓角(border-radius)、模糊(backdrop-filter)
```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: 外距
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 (用空格分開)
### flex練習 https://flexboxfroggy.com/#zh-tw
### 今天學到的東西：
#### EMMET
- !
- .class-name
- #id-name
- lorem
- input
- h1, h2, h3, h4, h5, h6, p
- form
#### CSS
- background
- background-image
- background-color
- background-size
- background-position
- background-repeat
- backdrop-filter
- display
- align-item
- justify-content
- flex-wrap
- position
- left, top, bottom, right
- margin
- padding
- outline
- border-width
- border-color
- border-style
## 完整 code
:::spoiler 上完課後才能看
```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>
```
:::
## 2022-11-17 現場社課版
:::spoiler 不要給我直接看解答喔!!!
```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>Document</title>
<style>
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.login {
background-image: url(./img/wallpaper.jpeg);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
form {
width: 400px;
height: 500px;
background-color: #ffffffd1;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 250px);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 30px;
}
input[type='text'], input[type='password'] {
background-color: transparent;
border-style: solid;
border-left: 0;
border-top: 0;
border-right: 0;
border-color: #2f7bf2;
width: calc(100% - 60px);
margin-top: 15px;
outline: none;
font-size: 16px;
}
input[type="submit"] {
width: 100px;
background-color: #2f7bf2;
color: white;
border-width: 0;
border-radius: 100000px;
padding: 10px 15px;
margin-top: 30px;
}
.fcc {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.fc {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.margin-l-30 {
margin-left: 30px;
}
</style>
</head>
<body>
<div class="login">
<form class="fcc" action="">
<div>
<div class="margin-l-30">
<h2>NTUST Login</h2>
<p>Lorem ipsum dolor sit amet consectetur</p>
</div>
<div class="fc">
<input type="text" placeholder="帳號" name="account">
<input type="password" placeholder="密碼" name="password">
<input type="submit" value="blabla">
</div>
</div>
</form>
</div>
</body>
</html>
```
:::
Sign in with Wallet
Connect another wallet