---
# System prepended metadata

title: 9/22  CSS3 基礎實作 微軟首頁仿切 - 檢討
tags: [2021/09/22, CSS3 基礎實作, 進度筆記, 前端心得]

---

# 9/22  CSS3 基礎實作 微軟首頁仿切 - 檢討   
###### tags: `CSS3 基礎實作` `2021/09/22` `進度筆記` `前端心得`  
---

# 今日講課-上午的部分  

# 微軟 - 切版大作業 - 檢討   

----

[Microsoft – 雲端、電腦、應用程式和遊戲](https://www.microsoft.com/zh-tw)

在做 RWD 時, 斷點會設蠻多的, padding 要注意一下   

---

# 為何網頁有 picture 和 source 的 html 標籤   

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

- 這個跟優化效能有關   

> 不同裝置的優化都不太一樣, 效能也不一樣, 通常 PC > 平板 > 手機   

- picture 元素   

如果小螢幕, 或是手機版的螢幕大小其實不用載這麼大的圖片檔案, 如果降低圖片畫質, 進到手機或平板螢幕, 其實沒有甚麼太大差別, 所以有降低螢幕解析度, 減少圖片容量, 使網頁載入速度提升, 跟 media query 很像   

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


# 參考資料:   

[picture: The Picture element - HTML：超文本標記語言 | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/picture)     

---

# 輪播區塊 - 示範 PC 版作法     

> 這邊開始都跟微軟的 html 不一樣   

==用 dev tool  抓不同尺寸的輪播圖==   

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

- 1600 * 900  
- 1260 * 472   
- 1083 * 609   
- 767 * 431   
- 539 * 303   

正常情況下, 從設計師那邊會拿到手機版的稿, 然後應該不會寫 h1 這種 html 元素給你, 所以我們自己想辦法把手機版的圖片跟文字分開      

---

# 在 html 內 讓文字跟圖片拆開   

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

> 一段文字區塊 和一段式圖片區塊   

用 background 和切換斷點去實現跟微軟類似的效果   

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

---

## 通常 section 的標題好像都用 h1  

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

---

# 長出結構, 把圖片和文字分離的區塊   

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

---

# 另開一個 carousel 的輪播圖片資料夾   

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

---

# 寫 輪播的 CSS  

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

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

---

# 統一用 flex 定位  

div 預設是 position static, 把文字修改成相對定位   

讓 文字也可被定位, 讓圖片和文字依照 html 結構   

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

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

---

# 調整按鈕位置  
> 去除 position absolute  

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

---

# 找出文字間距   
- 用以拉抓距離   
![](https://i.imgur.com/DLvPCBC.png)   

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

- 離左邊有點距離  

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

- 讓 p 有固定寬, 可以換行    

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

---

# 可以先保留自己的作法, 老師先示範怎麼做 RWD  

- 範例放在 google drive 上   

---

# 輪播區塊 - 示範 cell phone 版作法     

微軟的 vw 小到一定程度後, height 才會改有會有等比例縮放, 照著做的時候會有點爆版  

> 要調整的話可以改高度和寬度   

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

---

# 用 CSS 的方式, 當他寬變 1260px 時換圖   

- 比例很接近 1600px   

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

不過換成 1260 的時候, 圖片檔案容量大小有變小, 這樣讀取速度有增快, 有優化到   

不過如果用 CSS 控制去做, 會換很多的斷點, 可以用 picture 去做   

---

# 接著 1083px 的時候有個斷點   

- container 會變大, 高度也變了, 變成滿版   

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

---

## 當寬的尺寸是 1083 的時候, 要把 max-width 改變  

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

## 記得高也有變, 609px  

- 比例在 1083 * 609 的時候要滿版  

> 高度也要改, 別忘記 height 的 vw 比例 = 609/1083= 0.5623   

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

---

# 標題 和 p 也有斷點   
h 的 px 也有改變   
p 要變 330px 左右  

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

> @media 也有權重, 記得後寫的要多注意  

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

---

# 767 px 的時候有個斷點   

- 版型整個大變化了   

讓 position 回歸排版系統   

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

變成兩塊, 文字和圖片分開   

## 記得高度改了, 圖片也要有自己的高   

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

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

- height 是 100%  

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

---

# unset  

- 也可以讓 height 回歸正常  

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

---

# 更改文字標題和敘述高度和顏色   

- 767px 的時候背景會換顏色

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

- 文字也會更改   

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

- 間距也更改  

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

# 圖片要換成 767px 的圖片  

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

# 微調  

- 文字更改   

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

間距和 敘述 p  的大小   

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


---

# 記得有手機的 539 px 大小   

# 也可以用 picture 的 html 元素去做效能優化的部分   

---

# 下午部分 - 檢討四個欄位作法   

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

- 可以用 flex, gap, padding 來做  

---

# 參考微軟的作法, 左右 padding  

- 每個 col 的左右都是 12px padding   

---

# 四個欄位 的 html 結構   

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

- row 裡面總共有四份 col   

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

跟  Twitch 仿切的時候很相像   

---

# 幫 4 個欄位加上 CSS 樣式 - padding 版本   

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

> 加上 flex   

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

- 和用 margin 去推   

---

# 幫 4 個欄位加上 CSS 樣式 -  版本   

四欄式的排版, 每個間距是 24px, 總間距是 72 px, 因此我們用扣的   

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

## 用 space between 去推   

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

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

---

# 現代 4 欄式, 在網頁中很常見   

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

---

# 做四欄式 的 RWD  

- 把不同尺寸的圖片塞進去   

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

## 然後這次用 img 去塞圖片   

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

---

# 如果圖片尺寸不符合怎辦??  

- 把圖片請設計師出一張跟設計稿完全吻合的圖片   

- 自己用 CSS 強制挖圖放大   

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

## 可以發現 business pic 被 img 撐大  

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

## 這樣會一路跟著 col 走   

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

這是用 img 去做的好處, 因為他有容器包著, 可以不用去算長寬比, 因為父元件去帶長寬比   

==微軟首頁也是這樣做的==   


- 會算長寬比的場合, 可能沒有東西包著   

---

#  去調整間距   

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

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

- 盡量對齊就好   

# 用 padding 寫的好處 - 可以直接用 比例 去更改  

## 如果是 三欄式   

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

## 如果是 六欄式   

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

---

# html 的 img src 和 css 的 background-image 的使用時機   

- background-image   

==常用在大區塊上==   

> 例如有些時候會讓文字置於文字之後, 有容器去包著文字   

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

> 或是電商的一些商品圖片上有壓一些 logo 的東西, 可以用背景圖片去做   

> 如果你的圖片失去連結, 或是 CRUD 請求的動作沒有完成, 可以用 img src alt 去顯示替代文字   

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


- 如果是這種單個單個的圖片, 比較沒有文繞圖的情況   

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

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

- 但也不是不行用 background-image  

# 參考資料:  

[何時使用IMG與CSS背景圖像？ | 程式設計討論 | adabai.com](http://www.adabai.com/questions/a12131561345295.html)   

---

# 記得寫作業檢核表, 跟上進度, 比較能學到新課程   



