---
# System prepended metadata

title: 9/07  CSS3 基礎實作
tags: [CSS3 基礎實作, 進度筆記, 2021/09/07, 前端心得]

---

# 9/07  CSS3 基礎實作   
###### tags: `CSS3 基礎實作` `2021/09/07` `進度筆記` `前端心得`  
---

## 今日講課-上午的部分  

 黃柏鈞 講師   
 
 ----
 
 ## 上午課堂練習 - Facebook 仿切   
 
老師切的 FB 版面樣式 (https://codepen.io/testBP/full/oWqKYW)   
 
 ## 解說組成   
 
 ###    先找最外層的 div 外框   
 
- 找出分了幾塊   
 
 - 由上而下, 由左到右   
 
 先切最大塊的   
 
 ![](https://i.imgur.com/5fKFduV.png)   
 
 再細分三塊   
 
![](https://i.imgur.com/BNj6dbg.png)   

# 在最上層的框框 div 有兩個元素   

# 試試看能不能做出 HTML input   

![](https://i.imgur.com/0BTxSqL.png)   

![](https://i.imgur.com/qJZ3lqU.png)   


https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input/submit

# 放入圖片的語法   

![](https://i.imgur.com/UxZIqgQ.png)   

找 Facebook Icon 的網址塞進去 src    

https://i.imgur.com/m821CGB.png"


## img   

img 這個屬性他會強制讓寬高等比例縮放, 如果只設 width, 但其實高度也會改變, logo 剛好是 1:1   

![](https://i.imgur.com/XWR6Jfg.png)   

## alt   

- 圖片替代文字   

當圖片失效的時候, alt 的文字會跑出來   

![](https://i.imgur.com/mzhYfnW.png)   

---

# 第二層的 div 框框  

# 分別有三個 div, 大頭貼, 更新資料以及更新活動資料   

用 position 去定位大頭照的位置   

![](https://i.imgur.com/eoZaF5H.png)   


# 第三層的 div 框框   

一個大 div 包著五個小 div    

---

# 最終會有十來個 div  

![](https://i.imgur.com/jgsnWxC.png)   

老師切的 FB 版面樣式 (https://codepen.io/testBP/full/oWqKYW)   

----

# 課堂檢討:    

# 先做主體架構:  

![](https://i.imgur.com/3zWRxKf.png)   

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

![](https://i.imgur.com/nPqPmY5.png)   


## 記得把 body 身上的屬性消除   

![](https://i.imgur.com/0gudh6L.png)   


## DIY - 消除屬性  
```
        body {
            background-color: #555555;
            margin: 0;
            padding: 0;
        }

```

## 切出上中下版面的 CSS 樣式   
![](https://i.imgur.com/ICPmnVm.png)   

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

## 開始上色   

![](https://i.imgur.com/yaOwKeJ.png)   

## 好了後記得把 wrap 的 border 拿掉   

---

# top 處理 FB 的 icon    

找一個白色底的 logo   

![](https://i.imgur.com/cMg9YYs.png)   

## 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 包含兩個資料按鈕   

![](https://i.imgur.com/on47w60.png)   

- 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://i.imgur.com/n0c499h.png)   

做出兩個更新資料      

![](https://i.imgur.com/xXQNjHD.png)   

---

參考資料:  

https://www.fooish.com/html/list-ul-ol-li-dl-dt-dd-tag.html   

https://www.wibibi.com/info.php?tid=350   

---

# 做大頭貼的 CSS  

![](https://i.imgur.com/Qu7JSXr.png)   

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

![](https://i.imgur.com/ggU2Ntm.png)   

# div 的內建 display 屬性   

```
div {
    display:inline-block;
}
```

因此做 ``display: inline-block`` 讓他們可以左右排列  ![](https://i.imgur.com/pfkUm9G.png)      

並更改按鈕的背景顏色, 水平垂直置中

# 水平垂直置中的做法   

```
1. 先寫 div 的寬高再調整   

2. 用 ↓ 文字去撐大 box 的外框  
padding

```

## inline-block bug  & 基線對齊    

就算用 display: inline-block 去撐大字體後, 會發現兩個按鈕之間有個空白處 ↓   

![](https://i.imgur.com/KC5Udt6.png)

![](https://i.imgur.com/y8AyNi7.png)   

解決方法之一, 讓兩個 div 處在同一行列上不斷行 
```
<div></div><div></div>   
```

解決方法之二, 如果他是 font-size, 那就把他字體大小改成 0   

![](https://i.imgur.com/4rZ2nuT.png)   
- 寫 CSS 的時候某些 CSS 會被繼承   

![](https://i.imgur.com/ILKYHmb.png)   
 
- 像改了 font-size 會讓子層的寫的文字消失   

![](https://i.imgur.com/X3qGasU.png)   

然後你把文字 size 調整回來後, 記得把基準線對齊也切回來  

![](https://i.imgur.com/lr25snr.png)   


![](https://i.imgur.com/0GoW2WM.png)   

因此要記得   
![](https://i.imgur.com/7sMZOop.png)   

![](https://i.imgur.com/ZjRv4lf.png)   

![](https://i.imgur.com/Tj6UvWd.png)   
 

參考資料:   
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;
        }
```

# 調整大頭貼位置   

![](https://i.imgur.com/CS0b6sf.png)   

## 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 外框跟按鈕的位置   

![](https://i.imgur.com/qyI3fbF.png)

## 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 )拿來炒菜, 才有作用   
 
 ----
 
 ![](https://i.imgur.com/I5kAf5M.png)   
 
 # 記得幫動態時報加線    
 
 記得幫 ![](https://i.imgur.com/9XyNtSO.png)   加線   
 
 ![](https://i.imgur.com/6wcSzbn.png)   

看起來很像了 ↓   

![](https://i.imgur.com/k9P0bNB.png)   

## 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 幫文字框加上文字: 搜尋、人、地點、事物   

![](https://i.imgur.com/apF9fYW.png)   

讓 img 跟 input 水平置中, 寬 394 (希望高度用 padding 去推、撐大, 在按鈕和文字常用)   

# 文字框加上圓角   

![](https://i.imgur.com/RbqVDNV.png)   

![](https://i.imgur.com/gr9B90g.png)   

# 幫 logo 和文字框對齊-又有 bug   

基線的對齊錯誤   

![](https://i.imgur.com/zkoY6UY.png)   

![](https://i.imgur.com/Y6W1vDw.png)   

你今天把某元素改成 inline/inline-block 的話, 就會發生基線對齊的錯誤, 記得下 vertical-align: middle  



![](https://i.imgur.com/tlTvTmv.png)   

參考資料:   

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/   

眼前這塊靜景是動的最快的, 最遠的太陽最慢, 做出有種視差的效果, 可以讓圖片定在原地, 原本只看得到上半部分   

![](https://i.imgur.com/ye2tJen.jpg)   
 
 但當視窗在捲動時. 往下捲動就會慢慢看到這張圖的下半部分   
 
 ![](https://i.imgur.com/Sa0uGCL.jpg)   

遠景 → 近景 → → 中景移動造成視覺差異效果    

可以用不同的圖片切換造成視差   

# 用 view 造成效果  

![](https://i.imgur.com/Eqznx63.png)   

可以用 `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://i.imgur.com/wboS9H4.png)

參考資料:   
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size   

---

# background-position  

![](https://i.imgur.com/VSbP1Sp.png)

```
                                                              center            top
background-position: (屬性X) (屬性Y)
Y軸 - 值 指向上面, + 值往下跑  

X 軸 - 值往右, +值往左  
```

![](https://i.imgur.com/mMvGJL2.png)   

參考資料: 
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position   

----



![](https://i.imgur.com/UiBnOlv.png)   

# background-attachment   
可以把圖片定位在 tag (原地)處   

```
background-attachment: fixed     
讓 background-image 根據整個可視範圍(view point)的 100% , 而非根據 div      

讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。
```

這屬性會搭配  background-size   
```
記得先改 body { height: 3000px; }用 content 比較不好移動, 用 cover 比較滑~   
```
![](https://i.imgur.com/176g5Cm.jpg)   

參考資料: 
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://i.imgur.com/z3meuEH.png)

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    

擷取整個頁面   

----

![](https://i.imgur.com/FS9jEQT.png)   

文字要水平垂直置中   

div 大概長這樣  

![](https://i.imgur.com/MqUzA33.png)

圖片都要用 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:   
![](https://i.imgur.com/Yxxz3ke.jpg)  
![](https://i.imgur.com/tsDnN01.jpg)  

![](https://i.imgur.com/XeSBOR1.jpg)   
  ![](https://i.imgur.com/XZ9pWFI.jpg)


