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

# 今日講課-上午的部分

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

----

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

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


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


# 把 display 改成 none 就會消失


- 稍微改個字體

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



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


# 用 nth-child 算數學

- 讓 xbox 和支援消失


# 修改 更多這個選項


# 點下去跳出下拉選單

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



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


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



# 觀察下拉式選單的間距

- 修改一點間距



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


# 做點擊的效果

先把 menu-more 的顯示改成 none

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



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


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


# 點下去的時候才有顏色


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


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

----

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



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

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


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



# 分散對齊


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


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





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


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

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


- 一個冒號前綴的是偽類 (:) 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


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


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

 before 標題 after 

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


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

> ==這東西沒有 display==

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

# 如果你把 h1 標題弄成 flex ?


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

# clip-path 可以裁減元素

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


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

# 參考資料:

[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 的時候長一條線

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


---

# Special affect - 放大照片的效果

- 偽元素範例, 應用範例


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



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

# hover 的時候, 讓圖片變大



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


讓偽裝元素 置於 .photo 後

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


# z-index 問題

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


# 參考資料:

[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可以碰到圖片的時候, 放大


好像怪怪的


下 transition 可以讓圖片放大

# 做個遮罩給 photo


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



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


# 特殊相片牆效果



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

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

---

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