---
# System prepended metadata

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

---

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

# 今日講課-上午的部分  

# 微軟 - 切版大作業   

----

# 四天連假切出 Ms 首頁   

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


把首頁從頭到尾切出來~   

```
html 結構用 HTML 5 元素
header, section, nav
```

# 導出 CSS   

建立一個 CSS 資料夾, 裡面放 style.css   

# 接著改 title 名稱   

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

# 找微軟的 ico 檔案   

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

長這樣   

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

放到 img 資料夾內的 logo 資料夾   

# 作網站的基本設定   

分頁的標籤圖   

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

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

這樣可以做出分頁標籤   

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


# 導入 CSS 樣式表     

在另外導入的 CSS 檔案   

稍微寫一下   

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

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


可以看到導入成功   

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

----

# icon 支援包   

直接點 icon 的連結   

https://cdnjs.com/libraries/font-awesome   

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

用 CDN 導入   

複製這個簡易連結, 如果要更完整可以選盾牌的連結   

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

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

> 如果打開檔案可以看到被壓縮的東西   

# 透過 CDN 連結到別人的網站   

導入的 CDN 有 i 標籤, 這個是一個文字, 要改大小可以用 font-size   

# 參考資料:   

**[什麼是內容傳遞網路 (CDN)？ - Azure | Microsoft Docs](https://docs.microsoft.com/zh-tw/azure/cdn/cdn-overview)   
**

[內容傳遞網路 (CDN) | Microsoft Azure](https://azure.microsoft.com/zh-tw/services/cdn/)   

[內容傳遞網路 \- 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/zh-tw/%E5%85%A7%E5%AE%B9%E5%82%B3%E9%81%9E%E7%B6%B2%E8%B7%AF)   

[What is a CDN? | How do CDNs work? | Cloudflare](https://www.cloudflare.com/zh-tw/learning/cdn/what-is-a-cdn/)   

[Cloudflare CDN | 內容傳遞網路 | Cloudflare](https://www.cloudflare.com/zh-tw/cdn/)   

[中華電信CDN規格介紹 | 中華電信網路門市 CHT.com.tw](https://www.cht.com.tw/home/enterprise/hinet/hinet-internet/hinet-cdn)   



# 老師示範微軟上面的網頁作法   

![](https://i.imgur.com/WQiGvEq.png)
 
 ## header 內拆分成幾個區塊  
 
 觀察一下 html 架構   
 
##  logo 的結構, 長三層   

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


## menu 的 a 連結長出來   

365, office, windows surface, xbox, 支援   

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

 ## 右邊的 nav 導覽   
 
 所有 Miscrosoft, 搜尋, 購物車, 登入   
 
 ![](https://i.imgur.com/9Xv4i4w.png)   

 ## 搜尋的放大鏡圖案  
 - 可能要用畫的, 畫的要存成 svg      
 - 或是上網找   
 
 ![](https://i.imgur.com/1gBkgeg.png)   

## 把購物車和登入放在一起   

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

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

## 會員的圖片記得可以分類   

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

svg 放進去 html 後可能會很大, 可以調整一下   

# header 搞定後可以收起來   

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

# 先大致分類 html 架構的樣子   
## 第二區塊   
例如 main > section id="carousel" (區塊)   
div class carousel (第二區塊輪播的位置)   

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

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

> 可以參考 HTML5 版面 432 頁   

# 可以用一個 container 把 東西包起來   

複製頁面丟到以拉   

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

量一下大小   

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

大區塊實際上都被個看不見的 container 包著, 給個 container 比較好做   

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

像這樣一層包一層   

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

section 大區塊 包著 container, 而 container 容器包著小區塊, 也就是說這些區塊(內容)都是被 width 1600 的 container 包著   

# 做完一個區塊再做一個區塊   

> [慢慢修]   

# CSS 命名規則   

- 這邊主要是 BEM 的模式   

現在上課例如, all-sitemap, 這也是公司的風格   

> 每間公司可能都不太一樣   

==OOCSS==
==SMACSS==

- ==BEM==   以 block, element, modifer 來製作, 要有語意化概念, 通常 B 跟 E 比較常見, M 就比較少見   

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

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


<!-- 心靈雞湯

https://idoc.hexschool.com/

> 先從基礎學, 沒寫過爛 code 怎麼知道好 code   
> 如果有自學課程, 可以找上一小時然後自己實作三小時的課程   -->


# 參考資料:  

https://cythilya.github.io/2018/05/22/bem/   

[BEM，CSS 設計模式 – 竹白記事本 (chupai.github.io)](https://chupai.github.io/posts/2104/bem/)



----

# 專題任務? - 剩下的是四天作業   

# 下午的排版提示   

# 輪播的區塊   

![](https://i.imgur.com/kaiFCkx.png)   這個點點跟暫停可以不用做   

![](https://i.imgur.com/p3t0H54.png)   這兩顆按鈕也可以不用做   


- 圖片寬高要會隨著網頁縮放去改變, 這是等比例縮放   

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

手機版的變化很有挑戰性   

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


# 實際示範   

這會爆版:   
![](https://i.imgur.com/9OnAKQu.png)   


寬會隨著螢幕比例縮小,高是 600   
![](https://i.imgur.com/M4UcBQI.png)   

當可視範圍寬度改變, 你希望將螢幕高不改變, 去計算比例的時候, 意思就是佔寬度的比例要縮小   

600(原始的高) / 1920(原始的寬) => 現在 600 這個尺寸在 1920 底下的可視比例(vw)  
==31.25%==   

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


# 參考資料:   

> 等比縮放  
[Css Sprite 圖片等比縮放圖片大小 | 程式前沿 (codertw.com)](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/531918/)  

# 立刻選購的動畫怎麼做   
## hover 進階使用方式   

1. 把 position 改 absolute   

2. 或是改成固定寬度   

---

要把立刻選購這個按鈕用 span 包起來  

color 這個屬性會被繼承   

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

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

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


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

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

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

或是  

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

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

----

# 下面的排版跟 twitch 類似

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

- RWD 的製作: 4 個變成 2 個 2 個 1 個  

可以用比例計算器, 去計算, 這個中間的影像是 1600 * 600   

CSS 等比縮放 - 寬高不能寫固定大小   

# 4 欄的排版  

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

上面還有 6 欄的排版   

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

這跟 Twitch 區塊很像  

----

# ==四天回家大任務 - 要做的東西==   

-  html 結構用 HTML 5 元素  

> 例如, header, section, nav  

- CSS stlye 怎麼導入 html 架構   
-  怎麼用 dev tool 抓 icon   
-  怎麼導入 CDN 到 html 架構   
-  CSS 命名規則   
----------------------------------   
- 輪播 (carousel)的區塊  
![](https://i.imgur.com/kaiFCkx.png)   
> 這個點點跟暫停可以不用做  

![](https://i.imgur.com/p3t0H54.png)   
> 這兩顆按鈕也可以不用做  

-  圖片寬高要會隨著網頁縮放去改變, 這是等比例縮放(要怎麼算)  

![](https://i.imgur.com/jW5m1Cp.png)   
> 手機版的變化很有挑戰性  

先切好大區塊再來   

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

----------------------------------

 # 連假後會檢討一下  
 
 會有很多做法, 可以上網多學   
 
 ---

