---
# System prepended metadata

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

---

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

# 今日講課-上午的部分  

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

----

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

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

----

# 老師示範 footer 的作法   

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

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

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

# 做出第一個 list  

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

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

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

# 直接用 padding 推   

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

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

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

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

# 調整 footer 背景和文字顏色   

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

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

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

# 微調 footer  下 padding  

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


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

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

# 左右對齊最底部的文字   

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

# 調整最底的間距   

在控制整個最底的 bottom

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

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

把 CSS color 丟到最大的元件內, 讓顏色出來   
![](https://i.imgur.com/y9YFDIQ.png)   

# 最底的抓間距   

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

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

# 最後調整文字   

font family 微軟正黑體   

footer 的文字大約 13px   

# 把 footer 弄出 RWD   

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

> 三欄式分三等份   

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

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

# 1083 的時候間距也有換   

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

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

# 最後 539 變成一欄式排版   

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

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

----

# 下午的部分 - carousel 下面的三個小圖示   
![](https://i.imgur.com/lfgKuKU.png)   

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

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

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

# 讓這三個標籤 排在一起   

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

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

# 長間距和水平垂直置中   

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

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

# 把圖片上下排   

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

# 圖片炸了   

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

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

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

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

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

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

# 幫他做點擊效果   

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

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

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

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

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

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

# 點下去有 hover 加上底線      

- 記得加上 hover  

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



# 三個圖案的文字效果  

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


# 三個圖案的 RWD 效果   

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

## 767px 的時候三個圖案文字變成橫向的   
![](https://i.imgur.com/snaxZAe.png)   

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

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

- 水平 > 直向   

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

---

# header 的部分  

先大致弄好位置   

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

將東西弄成一直線   

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

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

# 把 a 連結寬高拉回來   

把 a 下 inline  

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



# 看文字間的間距  

稍微調整一下   

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

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

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

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

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

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

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

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

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

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

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

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


# 更改會員區的文字大小  

在父元件下 font size 12px   

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

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

> 用 gap 去處理會員圖案  
> 調整放大鏡按鈕的間距   
![](https://i.imgur.com/yyiEbKH.png)   

# 讓登入失去收縮性  

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

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

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

# 微調一下   

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

然後拿掉會員的連結底線  

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

# 再微調一下 - dev tool   

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

font-size 20px   




---

# header - RWD  

明日老師會繼續示範   

---


