2023-11-21 Web-Frontend 講義

# 2023-11-21 Web-Frontend 講義 [素材](https://mailntustedutw-my.sharepoint.com/:f:/g/personal/b11015020_mail_ntust_edu_tw/EkcjQa3QTXdClu7hCZ_9xqsBVNIYfN_WW4E3vzit13ZBCQ?e=WkmjA9) ## 步驟 ### ! -> emmet html 基本架構 - 做到這幾項 - 選一張圖片放到專案資料夾內 - 在body裡面打".content"，按一下tab - 在 head 裏面新增一個 style 標籤 - 用 css selector 選擇 .content - 設定 background-image :::spoiler Emmet 小背景 [Emmet](https://emmet.io/) 是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。此项目2008年由Vadim Makeev发起，并由Sergey Chikuyonok和其他Emmet用户基于Zen Coding 2.0的概念继续积极开发。 :::  ::: info - 輸入 `.content` 會產生一個 `div` 標籤，它的 class 會是 `content` - div 是 HTML 中最基本的元素之一 ::: ```htmlembedded= <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <style> .content { background-image: url("./img/wallpaper.png"); } </style> </head> <body>     <div class="content"> </div> </body> </html> ``` ### emmet -> lorem 生一堆文字 ### set background css ```css= background-image: url(./img/wallpaper.png); height: 100vh; width: 100vw; background-size: cover; background-repeat: no-repeat; background-position: right; ``` ### 小箭頭拿掉找白邊 -> margin: 0 ```css= body { margin: 0; } ``` ### 寫表單裡面的元素 elements emmet :::info type `h1+p+(label>input)*2+input[type=submit]` + press `tab` ::: ```htmlembedded= <div class="content"> <form action=""> <h1>Login</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores eos fugit laboriosam modi neque voluptatum. A aperiam assumenda dolorum enim esse eveniet magnam nobis odit quaerat sit suscipit temporibus, voluptatibus! </p> <label> 帳號 <input type="text"> </label> <label> 密碼 <input type="text"> </label> <input type="submit"> </form> </div> ``` ### 寫表單樣式這邊的 css selector 直接選 html tag name ```css= form { width: 400px; height: 550px; background: #ffffffb0; /* 背景顏色，用Chrome開發者工具調透明度 */ padding: 24px; /* 內距 */ border-radius: 24px; /* 圓角 */ backdrop-filter: blur(20px) saturate(180%); /* 高斯模糊、色彩增艷 */ position: absolute; left: 50%; top: 50%; } ``` ### 讓表單在中間看我的畫板，搞懂為什麼要這樣寫比較重要 ```css= left: calc(50% - 200px); top: calc(50% - (550px / 2)); ``` ### 讓表單在中間，讓表單在真正的中間你知道為什麼要 -24px 了嗎？ ```css= position: absolute; left: calc(50% - 200px - 24px); top: calc(50% - (550px / 2) - 24px); ``` ### input-field css #### 大概先改成這樣 ```css= label> input { width: 100%; background-color: transparent; border: none; border-bottom-width: 0.3px; outline: none; /* 消除點下去藍色的框框 */ border-bottom-color: #333; border-bottom-style: solid; } ``` #### input-field css detail ```css= width: 100%; background-color: transparent; border: none; border-bottom-width: 0.3px; outline: none; border-bottom-color: #333; border-bottom-style: solid; padding: 0; padding-bottom: 12px; font-size: 16px; ``` :::danger 温馨提示: <span style="font-size: 1in">当前教程</span> ::: ### submit button css ```css= background: #333; color: white; padding: 12px 36px; border: none; border-radius: 123123123123123px; font-size: 16px; ``` ### make submit in center Q: 為什麼不用剛剛教的置中方法？ #### html 改成這樣 ```htmlembedded= <div class="submit-button-container"> <input type="submit"> </div> ``` #### css 寫這些 ```css= input[type='submit'] { background: #333; color: white; padding: 12px 36px; border: none; border-radius: 123123123123123px; font-size: 16px; } .submit-button-container { display: flex; justify-content: center; } ``` 補充: [flex 遊戲](https://flexboxfroggy.com/#zh-tw) ![image](https://hackmd.io/_uploads/B1KmYZ54p.png =400x) ## 重要觀念 - emmet + tab = 起飛 - css 後面的可以蓋過前面的設定 - css 定位系統是以左上為中心定位 - 置中的方法 - css selector，你能選到你要的元素嗎 - 小箭頭會用了沒？ - 你會用Chrome 開發工具改樣式了嗎？ - 你會善用這個東西了嗎 ![image](https://hackmd.io/_uploads/SkRUcbqEp.png =300x) - background-size, -repeat, -position 的設定與意義 - padding, margin 差異 -

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.