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

# 今日講課-上午的部分

# 微軟 - 切版大作業 - 檢討 footer 區塊

----

> 微軟官網的頁面小更新, 多了幾張圖和新上市

> 昨天檢討了輪播, 和四欄式卡片作法

----

# 老師示範 footer 的作法

- 六欄式的排版, 蠻多欄位可以重複利用的


- 一個合理的設計稿, 他的間距應該都會要一致, 通常不會有太大改變

# 做出第一個 list




# 直接用 padding 推



因為 ul 自帶內外距和裝飾點點, 所以先消掉


# 調整 footer 背景和文字顏色




# 微調 footer 下 padding


# 調整最底部的 footer 文字和消除裝飾點


# 左右對齊最底部的文字


# 調整最底的間距

在控制整個最底的 bottom


# 讓所有人都吃到文字顏色

把 CSS color 丟到最大的元件內, 讓顏色出來

# 最底的抓間距



# 最後調整文字

font family 微軟正黑體

footer 的文字大約 13px

# 把 footer 弄出 RWD

# 1083 的時候換版
- 換成三欄式的排版

> 三欄式分三等份



# 1083 的時候間距也有換


讓所有的 footer list 給了margin bottom 50px 去對齊

# 最後 539 變成一欄式排版

可以在 bottom 下 flex wrap 讓他去換行


----

# 下午的部分 - carousel 下面的三個小圖示


> 看起來有三個 a 標籤, 置中, 弄個 container 把這三個按鈕包起來


# 讓這三個標籤 排在一起



# 長間距和水平垂直置中



# 把圖片上下排


# 圖片炸了


下 flex 後, 圖片大小改變, 寬高改成 40 * 40


# 幫圖片的文字來個間距, 按鈕分開點



# 幫他做點擊效果



# 幫他做個透明框線, 點下去才不會有撐開的效果


# 點下去的時候背景變成透明藍


# 點下去有 hover 加上底線

- 記得加上 hover


# 三個圖案的文字效果


# 三個圖案的 RWD 效果


## 767px 的時候三個圖案文字變成橫向的


## 767px 圖案變成直向排列

- 水平 > 直向


---

# header 的部分

先大致弄好位置


將東西弄成一直線



# 把 a 連結寬高拉回來

把 a 下 inline


# 看文字間的間距

稍微調整一下


# menu-item 的這些文字調整大小, 顏色


# 更改登入, 和用 span 包住登入


# 接著把會員區的部分移動到最右邊


在 flex 的情況下, 把 margin-left 調整成 auto 他就會幫你推, 調整位置


# 把會員區的部分垂直置中



# 更改會員區的文字大小

在父元件下 font size 12px

# 調整會員區各圖案的間距


> 用 gap 去處理會員圖案
> 調整放大鏡按鈕的間距

# 讓登入失去收縮性

flex shrink, 希望他不要被 flex 的屬性影響, 這樣可以讓寬度回復正常



# 微調一下


然後拿掉會員的連結底線


# 再微調一下 - dev tool


font-size 20px

---

# header - RWD

明日老師會繼續示範

---