---
# System prepended metadata

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

---

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

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

 做 Parallax 的延伸    
 
 ---
 
 ## 課後任務檢討 - 視差滾動
 
 - Parallax with background-attachment : fixed   

# 先做 滿版的大框框 區塊   

## bg-full 滿版區塊   
![](https://i.imgur.com/NqXvsyc.png)   

## bg-full CSS   

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

會發現在 SCROLL DOWN 上有個區塊, 

# 出現邊界重疊問題  

margin top 會把父層元素推開, 正常來說子元素不會這樣, 這種現象叫做邊界重疊, 發生後會以區塊大的為主   

- 可以用 paddimg 去推   

參考資料:   

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing   

https://note.charlestw.com/margin-collapsing/   

----

# 接下來放圖片   

當前目錄底下的 img/圖片   

調整 background-size, position   

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

# 把文字水平垂直置中   

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

記得父層 bg-full 要改成 relative  

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

接著繼續調整 水平垂直置中   

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

# 處裡文字底色   

白底黑字, 白色有點透明度, 還要有撐開效果   

- rgba, a for alpha "透明度" 數值 0 ~ 1 (0~100% 的意思，數值越接近0越透明)   

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

字元間距, 越大字體拉越開, 這次用到 8px   

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

拉開了 ↓   

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

---

# 課外知識 - google fonts  

- 字體使用時要注意別用到奇怪的字體  

每台電腦的字體庫都不同, 如果你有這個字體他人沒有, 別人的電腦沒有這個字體, 會變成電腦本身預設的字體   

## 常見面試考題 → 瀏覽網站的時候發生了什麼事情?   

---

因此 https://fonts.google.com/  解決了這個問題,    

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

右邊有三段程式碼可以拉過來, 貼到 meta name 下面   

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

這是使用 Google  font CDN 的東西

- 第一個是最單純的使用   
- 第二個是跨域請求, 因為 CORS(crossorigin) 的協定, 你必須做出跨資源請求動作  
- 第三個是從google font導入該字體，也最常用的, 也是本次課程導入的   

希望網站的字體是統一的, 所以通常會用萬用選擇器   

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

照規則讀, 從左往右讀, 會一直往下讀如果都沒有會想辦法讀通用字體 ↓   

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

到這裡都還是課外知識   

---

# 把字體水平垂直置中 - 續   

# postition   
left 50% top 50% 像是這樣↓   

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

因此需要位移自己半徑的一半, 使用 transform: translate(-50%, -50%)↓(即水平垂直置中)   

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

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

--


# 接著處裡下面的區塊  

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

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

# 讓這個區塊內的文字水平垂直置中   

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

# 接著讓文字左右對齊   

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

## 參考資料:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

---

# 分出最下面拿相機和裙子的區塊   

- bg-1, bg-text   

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

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

- 加上中間的 heilight 字體  

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

# 做出"相機"和裙子等 CSS 樣式   

做出 bg-1   

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

做出 bg1>h1  

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

# 做出相機和裙子之間文字的 CSS 樣式   

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

padding 左右 80px 要跟上面的文字也有對應   

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


# 做出相機和"裙子"等 CSS 樣式   

做出 bg-2 , 使用群組式選擇器   

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



# 最後在所有圖片的位置 fixed  

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

----

# 一頁式網站 - 超連結標籤  

在 parallax 作業內, 右上角加入三個按鈕，左上角加入logo

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

點 a 到頁面最上面, 點 b 到中間, 點 c 到最下面   

左邊 上面加導覽列,  

還要加上平滑移動   

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

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

# 下午的部分  

# 講解 z-index  

預設 z-index = 0, 且必須要是 div 內 position 是 static 以外的數值, 例如下 fixed, relative 才有作用   

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

- z-index 像是圖層, 預設是 0 , 1 的話可能就會下到圖形前面, -1 就會下到圖形後面   

----

# a 連結圖片的做法   

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

## 接著讓右上角的按鈕三個為一組變成連結   

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

如果底部的沒連到你要去到的網頁底部, 那應該建立 bg-full-1, bg-full-2   
![](https://i.imgur.com/vB3YJZn.png)  

## 同時也要改變 CSS 的連結方式   

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


# 記得更改 Menu   

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

讓 menu 的圖層浮出, 和縮小圖案   

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


# 對右上三個按鈕下 inline-break 去除空白   

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


# 課外小知識 a 的寬高問題   

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

發現 a 吃不到寬跟高   

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

a 這屬性預設是 display: inline, 這特性是, 如果 display 這屬性的值是下 inline, 該元素的寬高只會受到元素本身的內容(物)影響, 所以無法任意改變 a 以及 padding 的寬高(有吃到 padding)    

- 下 height 也無法影響,他 box model 的設定就是 auto 

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


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

## AAAAAAAA 就是內容物   

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

## 要修正的話下個 padding 20px    

# 接著改 logo 和 links 的位置   

- position: absolute , 下了 absolute 後會脫離排版系統(絕對定位, 成為自由的辣個男人, 想去版面哪就去哪)  

# 來看 menu 為啥無法推開 links  
![](https://i.imgur.com/ZrYZ17R.png)   
  

# 調整一下 menu 

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

menu  給個 60px 高  

# 最後記得在 html 上加上平滑移動效果   

----

# 課堂練習 - 恭喜第一個一頁式滾動視差主題網站完成~   


----

# RWD 原理 新內容   

RWD 概念 ↓   
![](https://i.imgur.com/Ee2b6pW.png)   

現在是網頁前端開發的基本工, 現在人人幾乎都有行動裝置, 所以網站幾乎都會應用 RWD 去支援手機, 平 ; dev tool 有觀看版型的功能   

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


# media query

版型會隨著螢幕裝置的寬高改變, 通常會先下個指令去預設一下 RWD   
```

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 @media screen and (max-width: 1200px){
    .box {
            background: red;
    }
}
1. viewport 蠻重要的, 現代開發都會保留這個, 別任意刪除~
2. 當螢幕畫面小於等於 1200px 時就會變成紅色   
```

滿足條件時會下樣式, 幫指定的東西多上一個屬性     

通常都先從電腦版開始開發(max-width), 很少會先從手機開始開發(min-width)   

## 參考資料:   

https://ithelp.ithome.com.tw/articles/10196578   

https://muki.tw/tech/css-media-queries-introduce-basic/  

https://blog.hinablue.me/css-media-query-tips/   

https://www.oxxostudio.tw/articles/201810/css-media-queries.html   

https://hsinyu00.wordpress.com/2011/04/05/mobile-web-media-queries/   

https://www.ibest.tw/page01.php   

----

# 開始學習使用 class  

```
html 中是用 class 的標籤(tag),

在 CSS 選擇器的時候是用  (  .  )  點的符號
```

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


# 通常最大框會使用 id 去寫   
只有一個 id, 具備唯一性   

class 可以給很多個 div 有不同的小名, 除了本身名字外,可能又多了一個綽號, 因此除了本身的名字外, 綽號上的屬性不會干擾到本身的名字   


class 使用上比較靈活, id 就比較沒那麼靈活, 因此最大的版型通常用 id   

## 參考資料:   

https://ithelp.ithome.com.tw/articles/10205099   

---

by 天心   

https://medium.com/@small2883/html%E7%9A%84id-class%E5%B1%AC%E6%80%A7%E4%BB%8B%E7%B4%B9-css-%E7%9A%84-class-%E5%92%8C-id-%E5%85%A9%E8%80%85%E6%9C%89%E4%BD%95%E5%B7%AE%E7%95%B0-25ce5315ece   

---

# 自動扣掉寬高, 避免版型出錯   
- 這很重要, 因為會希望所有元素的寬高都不應該被 border 或/和 padding 所撐大   

使用 border 和 padding 時會讓 box 的寬高被撐大, 會可以下個屬性   
```
        * {
            box-sizing: border-box;
        }
```

# 也很重要的, 消除預設的 margin 
- 這個也要記得   

body {
  margin: 0;
  padding: 0;
}


---

# 學習 RWD - 1, 今天進度接著先做到像老師的版面   
```
<!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;
		}

		.wrap {
			width: 100%;
			border: 1px solid #000;
		}

		.box {			
			height: 100px;
                        border: 1px solid #000;			
		}

		.boxA {
			width: 100%;
		}

		.boxB, .boxC {
			width: 50%;
		}

		.boxD, .boxE, .boxF, .boxG {
			width: 25%;
		}		
	</style>
</head>
<body>
	<!-- id 是唯一的 -->
	<div class="wrap">
		<div class="box boxA">A</div>
		<div class="box boxB">B</div>
		<div class="box boxC">C</div>
		<div class="box boxD">D</div>
		<div class="box boxE">E</div>
		<div class="box boxF">F</div>
		<div class="box boxG">G</div>
	</div>
</body>
</html>
```

# 下 max-width 網站左右都會留白  

這麼大的螢幕不太可能完全集中在所有範圍, 因此有一個適當的可閱讀範圍, 因此會把 wrap 加上 max-width: 1200px, 固定住版面的寬度, 因此不會讓他爆版以及拉住版面   
```

```


---

# 學習練習 RWD-2   

試著畫出   

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

```
試著加入 box-sizing 去解決盒子 border 增加的問題, 然後為了解決父層(wrap)下了inline-block 後的 bug , 將 font-size 改成0, 然後去子層(box)重新設定字體大小

        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            border: 1px solid black;
            font-size: 0;
        }
        .box {
            display: inline-block;
            height: 100px;
            border: 1px solid black;
            font-size: 16px;
        }

```




# 練習 RWD-3 讓方塊可以跟網頁一起縮(抖)動   

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

```
主要是加了 @media queries 去更改   
        @media screen and (max-width: 1024px) {
            .boxD, .boxE, .boxF, .boxG {
                width: 50%;
            }       
        }
        @media screen and (max-width: 768px) {
			.boxB, .boxC {
				width: 100%;
			}

			.boxD, .boxE, .boxF, .boxG {
				width: 100%;
			}
		}

```

## 參考資料:   

https://www.oxxostudio.tw/articles/201810/css-media-queries.html   

https://www.da-vinci.com.tw/tw/blog/detail/47   

https://www.ibest.tw/page02.php       

----


# 提早說大專題任務   

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

最後會做這個東西出來   




## 電腦版到手機板的演化史長這樣

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

↓

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

---

## 課後任務 - 回家做大螢幕的電腦版   

有提供 illustrator 檔案, 怎麼拉方塊間距(縫隙可能用 calc 去算比較好算), 高度 100vh 是滿版   

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

---

# calc 通常拿來做不同單位計算   

- padding 和 margin 也可以拿來用算的   

參考資料: 

by 文傑  

https://pjchender.blogspot.com/2015/04/css-3vh-vw.html?m=1  

---

還不用先寫 media query, 後面會教, 
如何左右水平垂直置中, 要上網查   

## 參考水平垂直置中方法:  

https://ithelp.ithome.com.tw/articles/10213784   

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align   

→ 先切電腦版   
![](https://i.imgur.com/mT7B6F2.png)    

快的話繼續切 →小螢幕版   
![](https://i.imgur.com/Yjb5Xzt.png)   

再來是平板版   

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


手機板是上課老師帶我們做~   
![](https://i.imgur.com/xabfH4B.png)

最終要組合在一起, 就像影片一樣   

快的話兩天做完, 慢的話三天   

<!-- 應該不太可能七天後做完(怕)   -->

----