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

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

做 Parallax 的延伸

---

## 課後任務檢討 - 視差滾動

- Parallax with background-attachment : fixed

# 先做 滿版的大框框 區塊

## bg-full 滿版區塊

## bg-full CSS


會發現在 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


# 把文字水平垂直置中


記得父層 bg-full 要改成 relative


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


# 處裡文字底色

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

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


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


拉開了 ↓


---

# 課外知識 - google fonts

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

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

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

---

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


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


這是使用 Google font CDN 的東西

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

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


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


到這裡都還是課外知識

---

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

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


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



--

# 接著處裡下面的區塊



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


# 接著讓文字左右對齊


## 參考資料:

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

---

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

- bg-1, bg-text



- 加上中間的 heilight 字體


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

做出 bg-1


做出 bg1>h1


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


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


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

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


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


----

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

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


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

左邊 上面加導覽列,

還要加上平滑移動



# 下午的部分

# 講解 z-index

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


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

----

# a 連結圖片的做法


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


如果底部的沒連到你要去到的網頁底部, 那應該建立 bg-full-1, bg-full-2

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


# 記得更改 Menu


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


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


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


發現 a 吃不到寬跟高


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

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



## AAAAAAAA 就是內容物


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

# 接著改 logo 和 links 的位置

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

# 來看 menu 為啥無法推開 links

# 調整一下 menu


menu 給個 60px 高

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

----

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

----

# RWD 原理 新內容

RWD 概念 ↓

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


# 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 選擇器的時候是用  (  .  )  點的符號


# 通常最大框會使用 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

試著畫出


試著加入 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 讓方塊可以跟網頁一起縮(抖)動


主要是加了 @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

----

# 提早說大專題任務


最後會做這個東西出來

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


↓


---

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

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


---

# 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

→ 先切電腦版

快的話繼續切 →小螢幕版

再來是平板版


手機板是上課老師帶我們做~

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

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

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

----