---
# System prepended metadata

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

---

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

# 今日講課-上午的部分  

# 微軟 - 切版大作業 - 檢討 手機 RWD   

----

# 會員區域 1399px 的時候會變版   

- 登入搜尋和購物車會消失   

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

> 把 所有 miscrosoft, 搜尋和購物車用個 span 包起來   

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

# 把 display 改成 none  就會消失   

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

- 稍微改個字體   

# ==修改間距 1399 px 時調整==    

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

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

- 左上的導覽列按鈕間距也有更動   

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


# 用 nth-child 算數學   

- 讓 xbox 和支援消失    

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


# 修改 更多這個選項   

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

# 點下去跳出下拉選單   

先讓更多的這個按鈕包住一個無序清單   

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

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

# ==接著 讓這個無序清單 在 880px 的時候才顯示出來==   

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

- 把這個清單用 position absolute   
- 這個清單的上層記得改 relative   

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

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

# 觀察下拉式選單的間距   

- 修改一點間距  

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

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

- 把下拉式選單的按鈕從會員那邊複製過來   

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


# 做點擊的效果   

先把 menu-more 的顯示改成 none  

- 用 nth child 選到 "更多" 這個按鈕  

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

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

# ==用 hover 做點擊的效果==   

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

- menu-more 點到的時候會展開   

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

# 點下去的時候才有顏色   

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

- 下拉選單的位置也修一下   

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

把下拉選單做出來 → 選單外框刻出來 → 在 PC 版的時候隱藏 → 指定的按鈕在 hover 點下去的時候才會出現   

----

# 859px 讓放大鏡消失再做一個新的出來   

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

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

# 手機版做下拉選單和摺疊按鈕   

- 網站術語: 摺疊(collapse)和按鈕(btn)區塊   

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

# 將按鈕水平垂直置中和分開間距   

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

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

# 分散對齊  

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

記得下 margin-left 才能分散對齊   

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

# 調整左右兩邊按鈕的間距   

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

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

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

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

# 讓下拉式選單和更多在 PC 版介面的時候要隱藏   

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

# 所有 Miscrosoft 也可以做做看(不一定要做)   

# 下午的部分 - 偽元素 (pseudo element)   

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

- 一個冒號前綴的是偽類 (:) pseudo class   

- 前綴帶有 (::) 的是偽元素, 可以用來裝飾用   

# 參考資料:   

[CSS | 全都是假的！關於那些偽類和偽元素 - 基本用法. 先來說說偽類（ Pseudo-classes ）吧！所有的偽類都會用 … | by 神Q超人 | Enjoy life enjoy coding | Medium](https://medium.com/enjoy-life-enjoy-coding/css-%E5%85%A8%E9%83%BD%E6%98%AF%E5%81%87%E7%9A%84-%E9%97%9C%E6%96%BC%E9%82%A3%E4%BA%9B%E5%81%BD%E9%A1%9E%E5%92%8C%E5%81%BD%E5%85%83%E7%B4%A0-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-4de48feb8607)   

[偽類與偽元素-30天學會HTML＋CSS，製作精美網站 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10270286)  
[重新認識 CSS - Pseudo-element (偽元素) | Titangene Blog](https://titangene.github.io/article/css-selector-pseudo-element.html)   

[關於 CSS 偽元素的那些小事 - Astral Web 歐斯瑞有限公司](https://www.astralweb.com.tw/the-things-about-css-pseudo-element/)  

[偽元素 \- 術語表 | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Glossary/Pseudo-element)   

[CSS 偽元素 ( before 與 after ) - OXXO.STUDIO (oxxostudio.tw)](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)   

---

# before & after  

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

> ==要啟用偽元素, 要先給個 content==  

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

  - 特性, 通常無法被選取  
  > 如果下了 b & a 在標題, 大概會像是這樣 
 ```
 before 標題 after 
 ```

> ==使用偽元素的時候通常都要加入 content==   

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

不給任何東西也好, `content: ''`

> ==這東西沒有 display==  

如果你給 inline-block 才能讓他佔滿整行(幫他上 display)  

# 如果你把 h1 標題弄成 flex ?   
![](https://i.imgur.com/gA1155Y.png)   

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

> 會變成 "標題" 像是父層, 這標題底下包著 before 和文字  

# clip-path 可以裁減元素  

> 會需要用到 code 去做座標, 再來做圖   

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

*不過網路上很多圖形產生器*   


# 參考資料:  

[https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)   

[clip-path - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)  

[運用 clip-path 的純 CSS 形狀變換 - OXXO.STUDIO (oxxostudio.tw)](https://www.oxxostudio.tw/articles/201503/css-clip-path.html)   

----

# fade in & out - 用 b & a + hover 的時候去裝飾  

- 用 hover 的時候長一條線  

- ==他有淡入淡出的效果==  

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

---

# Special affect - 放大照片的效果  

- 偽元素範例, 應用範例  

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

左右兩塊, 照片放裡面有效果, 常見的 container 約 1200px, 給個滿版的 container  

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

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

> 切版的時候最好再使用一個容器包著~  

# hover 的時候, 讓圖片變大  

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

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

不能讓 div 變大 會跑版, 所以   

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

讓偽裝元素 置於 .photo 後  

> 偽元素都會指向照片  
> 偽元素變成背景圖片   

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

# z-index 問題  

小心 z-index bug, 用這個屬性最好讓他可被定位  

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

# 參考資料:  

[4 reasons your z-index isn’t working (and how to fix it) — Coder Coder (freecodecamp.org)](https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/)  


#  transform可以碰到圖片的時候, 放大   

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

好像怪怪的  

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

下 transition 可以讓圖片放大   

# 做個遮罩給 photo   

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

這樣蓋不住, 不能用 background-color 去蓋   

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

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

# 讓圖片被點擊的時候換遮罩顏色  

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

# 特殊相片牆效果   

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

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

讓圖片有遮罩, 點下去的時候圖片放大, 而且變清楚   

切兩塊區塊 > 把照片放到 after > hover 的時候讓 after 放大 > 把父元素下 overflow, 不要超出去 > 下顏色遮罩   
   
---

# 履歷(可以用 cake resume) & 作品集(上)

