# 9/07 CSS3 基礎實作
###### tags: `CSS3 基礎實作` `2021/09/07` `進度筆記` `前端心得`
---
## 今日講課-上午的部分
黃柏鈞 講師
----
## 上午課堂練習 - Facebook 仿切
老師切的 FB 版面樣式 (https://codepen.io/testBP/full/oWqKYW)
## 解說組成
### 先找最外層的 div 外框
- 找出分了幾塊
- 由上而下, 由左到右
先切最大塊的
再細分三塊
# 在最上層的框框 div 有兩個元素
# 試試看能不能做出 HTML input
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input/submit
# 放入圖片的語法
找 Facebook Icon 的網址塞進去 src
https://i.imgur.com/m821CGB.png"
## img
img 這個屬性他會強制讓寬高等比例縮放, 如果只設 width, 但其實高度也會改變, logo 剛好是 1:1
## alt
- 圖片替代文字
當圖片失效的時候, alt 的文字會跑出來
---
# 第二層的 div 框框
# 分別有三個 div, 大頭貼, 更新資料以及更新活動資料
用 position 去定位大頭照的位置
# 第三層的 div 框框
一個大 div 包著五個小 div
---
# 最終會有十來個 div
老師切的 FB 版面樣式 (https://codepen.io/testBP/full/oWqKYW)
----
# 課堂檢討:
# 先做主體架構:
## DIY - 整體架構(暴雷)
```
<div id="wrap">
<div id="top">
<img id="logo"
src="http://www.freeiconspng.com/uploads/images-facebook-f-logo-png-transparent-background-page-2-29.png"
alt="">
<input id="search" type="text" placeholder="搜尋人、地點、事物">
</div>
<div id="middle">
<div id="avatar">
<img src="" alt="">
</div>
<ul id="data-btns">
<li>更新資料</li>
<li>查看更新活動資料</li>
</ul>
</div>
<div id="bottom">
<ul id="event-btns">
<li>動態時報</li>
<li>關於</li>
<li>朋友</li>
<li>相片</li>
<li>更多</li>
</ul>
</div>
</div>
</body>
```
# 開始做整體大框的樣式 - wrap
注意到背景是灰色的
## DIY - 大框架購樣式
```
#wrap {
width: 1280px;
height: 500px;
margin: 0 auto;
}
```
## pt 跟 px 等比例 1:1
## 記得把 body 身上的屬性消除
## DIY - 消除屬性
```
body {
background-color: #555555;
margin: 0;
padding: 0;
}
```
## 切出上中下版面的 CSS 樣式
## DIY & 上色
```
#top {
width: 100%;
height: 60px;
background-color: #395591;
}
#middle {
width: 100%;
height: 376px;
background-color: #333;
position: relative;
}
#bottom {
width: 100%;
height: 64px;
background-color: #fff;
}
```
## 開始上色
## 好了後記得把 wrap 的 border 拿掉
---
# top 處理 FB 的 icon
找一個白色底的 logo
## DIY - top FB 白色 logo
```
<div id="top">
<img id="logo"
src="http://www.freeiconspng.com/uploads/images-facebook-f-logo-png-transparent-background-page-2-29.png"
alt="">
<input id="search" type="text">
<!-- 直接抓老師提供的 FB logo 連結 -->
```
# middle 處裡大頭貼, 和用一個 div 包含兩個資料按鈕
- data-btns 常用按鈕縮寫
```
<div id="middle">
<div id="avatar">
<img src="" alt="">
</div>
<ul id="data-btns">
<li>更新資料</li>
<li>查看更新活動資料</li>
</ul>
</div>
```
---
# 補充 - middle 使用垂直行列的序列清單的屬性
做一些資料類的按鈕排序, 一條一條的垂直行列會去用到
```
無序清單
<ul>
<li></li>
<li></li>
<li></li>
</ul>
```
```
有序清單
<ol>
<li></li>
<li></li>
<li></li>
</ol>
```
做出兩個更新資料
---
參考資料:
https://www.fooish.com/html/list-ul-ol-li-dl-dt-dd-tag.html
https://www.wibibi.com/info.php?tid=350
---
# 做大頭貼的 CSS
## DIY - 大頭貼
```
#avatar {
width: 210px;
height: 210px;
background-color: #aaa;
border: solid 1px #eee;
}
```
---
# 接著做大頭貼旁邊兩個按鈕的 CSS
## 後代選擇器
```
#data-btns li {
選擇 data-btns 所有的 li(不分區, 連子層的子層都會被選到)
}
```
## 直屬選擇器
```
#data-btns>ls {
只選到第一層的 li
}
```
## ul 自帶 margin
跟 ul 的 display 屬性有關
### 而大部分的 CSS 的屬性都會有預設填滿
記得額外做個 CSS 削掉 ul 的 margin
# div 的內建 display 屬性
```
div {
display:inline-block;
}
```
因此做 ``display: inline-block`` 讓他們可以左右排列 
並更改按鈕的背景顏色, 水平垂直置中
# 水平垂直置中的做法
```
1. 先寫 div 的寬高再調整
2. 用 ↓ 文字去撐大 box 的外框
padding
```
## inline-block bug & 基線對齊
就算用 display: inline-block 去撐大字體後, 會發現兩個按鈕之間有個空白處 ↓
解決方法之一, 讓兩個 div 處在同一行列上不斷行
```
<div></div><div></div>
```
解決方法之二, 如果他是 font-size, 那就把他字體大小改成 0
- 寫 CSS 的時候某些 CSS 會被繼承
- 像改了 font-size 會讓子層的寫的文字消失
然後你把文字 size 調整回來後, 記得把基準線對齊也切回來
因此要記得
參考資料:
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/24783/
https://www.puritys.me/docs-blog/article-259-%E7%A7%BB%E9%99%A4-CSS-inline-block-%E7%A9%BA%E7%99%BD.html
## DIY - 中間資料按鈕 CSS
```
#data-btns {
margin: 0;
padding: 0;
font-size: 0;
position: absolute;
right: 19px;
bottom: 19px;
}
#data-btns>li {
display: inline-block;
background-color: #fff;
padding: 7px;
font-size: 14px;
margin-left: 19px;
}
```
----
# 所有樣式都弄得差不多了後?
# 調整 logo 位置
## DIY - logo 位置
```
#logo {
width: 36px;
margin: 12px;
vertical-align: middle;
}
```
# 調整中間區塊位置
## DIY - 中間區塊位置
```
#middle {
width: 100%;
height: 376px;
background-color: #333;
position: relative;
}
```
# 調整大頭貼位置
## DIY - middle 大頭貼位置 & 記得設定父層(middle) relative
```
#middle {
width: 100%;
height: 376px;
background-color: #333;
position: relative;
}
#avatar {
width: 210px;
height: 210px;
background-color: #aaa;
border: solid 1px #eee;
position: absolute;
left: 19px;
bottom: -42px;
}
```
# 調整 data-btns 外框跟按鈕的位置
## DIY - middle 中間資料按鈕位置
```
#data-btns {
margin: 0;
padding: 0;
font-size: 0;
position: absolute;
right: 19px;
bottom: 19px;
}
#data-btns>li {
display: inline-block;
background-color: #fff;
padding: 7px;
font-size: 14px;
margin-left: 19px;
}
```
---
# 想辦法調整最下層的外框和無序排列
## 無序排列自帶的 margin 撐開了
除了 margin 外還有 list-style-type (無序排列最開頭的 ˙ )影響
<!-- list-style-type (主元素), 會作用子元素 display: list-item 上, 如果今天 list-item 沒有 display, 其 list-style-type 也沒作用(有些元素子層掛了 父層也掛了) -->
鍋鏟(父層: list-style-type)你會搭配鍋子(子層- display: list-item, display 必須是 list-item )拿來炒菜, 才有作用
----
# 記得幫動態時報加線
記得幫  加線
看起來很像了 ↓
## DIY - bottom 最下層動態時報按鈕線框
```
#bottom {
width: 100%;
height: 64px;
background-color: #fff;
}
#event-btns {
margin: 0;
margin-left: 255px;
padding: 0px;
}
#event-btns li {
display: inline-block;
padding: 21px 25px;
border-right: 1px solid #eeeff1;
color: #395591;
}
```
---
# 最後, 幫文字框加上搜尋、人、地點、事物
去 body 幫文字框加上文字: 搜尋、人、地點、事物
讓 img 跟 input 水平置中, 寬 394 (希望高度用 padding 去推、撐大, 在按鈕和文字常用)
# 文字框加上圓角
# 幫 logo 和文字框對齊-又有 bug
基線的對齊錯誤
你今天把某元素改成 inline/inline-block 的話, 就會發生基線對齊的錯誤, 記得下 vertical-align: middle
參考資料:
http://csscoke.com/2018/08/21/css-vertical-align/
## DIY - top 搜尋欄 CSS 樣式
```
#search {
width: 394px;
height: 30px;
padding: 5px 10px;
border-radius: 5px;
font-size: 20px;
vertical-align: middle;
}
```
---
# DIY - FB 切版練習
```
<!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 {
background-color: #555555;
margin: 0;
padding: 0;
}
#wrap {
width: 1280px;
height: 500px;
margin: 0 auto;
}
#top {
width: 100%;
height: 60px;
background-color: #395591;
}
#logo {
width: 36px;
margin: 12px;
vertical-align: middle;
}
#search {
width: 394px;
height: 30px;
padding: 5px 10px;
border-radius: 5px;
font-size: 20px;
vertical-align: middle;
}
#middle {
width: 100%;
height: 376px;
background-color: #333;
position: relative;
}
#avatar {
width: 210px;
height: 210px;
background-color: #aaa;
border: solid 1px #eee;
position: absolute;
left: 19px;
bottom: -42px;
}
#data-btns {
margin: 0;
padding: 0;
font-size: 0;
position: absolute;
right: 19px;
bottom: 19px;
}
#data-btns>li {
display: inline-block;
background-color: #fff;
padding: 7px;
font-size: 14px;
margin-left: 19px;
}
#bottom {
width: 100%;
height: 64px;
background-color: #fff;
}
#event-btns {
margin: 0;
margin-left: 255px;
padding: 0px;
}
#event-btns li {
display: inline-block;
padding: 21px 25px;
border-right: 1px solid #eeeff1;
color: #395591;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<img id="logo"
src="http://www.freeiconspng.com/uploads/images-facebook-f-logo-png-transparent-background-page-2-29.png"
alt="">
<input id="search" type="text" placeholder="搜尋人、地點、事物">
</div>
<div id="middle">
<div id="avatar">
<img src="" alt="">
</div>
<ul id="data-btns">
<li>更新資料</li>
<li>查看更新活動資料</li>
</ul>
</div>
<div id="bottom">
<ul id="event-btns">
<li>動態時報</li>
<li>關於</li>
<li>朋友</li>
<li>相片</li>
<li>更多</li>
</ul>
</div>
</div>
</body>
</html>
```
---
# 視差滾動(Parallax scrolling)講解-以 FIREWATCH 為例子
https://www.firewatchgame.com/
眼前這塊靜景是動的最快的, 最遠的太陽最慢, 做出有種視差的效果, 可以讓圖片定在原地, 原本只看得到上半部分
但當視窗在捲動時. 往下捲動就會慢慢看到這張圖的下半部分
遠景 → 近景 → → 中景移動造成視覺差異效果
可以用不同的圖片切換造成視差
# 用 view 造成效果
可以用 `url ./(絕對目錄) ` 去抓圖片, 可以發現圖片的寬高很大, 把 圖片 3, 4000 的 pixel 塞進 1000x700的網頁寬高就需要縮小
參考資料:
https://developer.mozilla.org/en-US/docs/Web/CSS/url()
# background-size
```
cover
讓圖片的長或是寬只要有一邊能夠完全對上設定的 DIV 的某一個邊就停止縮放
```
```
contain
讓整張圖強制等比例縮放到完全塞進頁面(div), 但空白處讓圖片去重複填滿要搭配background-repeat : no-repeat;
(類似以前設定電腦螢幕桌布時，圖片若是太小會無限填滿直到畫面滿為主)
```
```
填入%數，60%(寬)、80%(高)
例: 填入80%，會縮放到以div的長寬去設定80%的可視範圍
---but---
若是加上 background-attachmev;
則會以"畫面"的可視範圍去調整(詳細可往後看)
```
參考資料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
---
# background-position
```
center top
background-position: (屬性X) (屬性Y)
Y軸 - 值 指向上面, + 值往下跑
X 軸 - 值往右, +值往左
```
參考資料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
----
# background-attachment
可以把圖片定位在 tag (原地)處
```
background-attachment: fixed
讓 background-image 根據整個可視範圍(view point)的 100% , 而非根據 div
讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。
```
這屬性會搭配 background-size
```
記得先改 body { height: 3000px; }用 content 比較不好移動, 用 cover 比較滑~
```
參考資料:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/background-attachment
-
# 讓被嚇到的鼠鼠消失
```
<!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: 0;
padding: 0;
height: 3000px;
}
#view {
width: 1000%;
height: 700px;
background-image: url(https://imgur.dcard.tw/EJFwGRF.jpg);
background-size: content;
background-position: center top;
background-attachment: fixed;
background-repeat : no-repeat;
}
</style>
</head>
<body>
<div id="view"></div>
</body>
</html>
```
---
# 課後任務: 切 parallax
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
----
先裝 [fire shot] 外掛
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=zh-TW
擷取整個頁面
----
文字要水平垂直置中
div 大概長這樣
圖片都要用 parallax 效果定住
----
參考資料:
https://ithelp.ithome.com.tw/questions/10196028
https://reurl.cc/oxzNEV
https://www.bondlink.com.tw/webdesign/market-show.asp?id=271
https://ithelp.ithome.com.tw/questions/10196028
---
by 文傑 同學
https://ithelp.ithome.com.tw/articles/10199731
by 佩婷 同學
https://ithelp.ithome.com.tw/articles/10192878
https://www.webtech.tw/info.php?tid=48
---
by 巧頤 同學
https://medium.com/unimarket/%E6%BB%BE-%E5%8E%B2%E5%AE%B3%E7%9A%84%E7%B6%B2%E7%AB%99%E8%A1%A8%E7%8F%BE%E6%B3%95-1bafffb56955
https://www.minwt.com/webdesign-dev/css/21484.html
---
Temp:
Sign in with Wallet
Connect another wallet