# 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 名稱


# 找微軟的 ico 檔案


長這樣


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

# 作網站的基本設定

分頁的標籤圖



這樣可以做出分頁標籤


# 導入 CSS 樣式表

在另外導入的 CSS 檔案

稍微寫一下



可以看到導入成功


----

# icon 支援包

直接點 icon 的連結

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


用 CDN 導入

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



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

# 透過 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)

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


## header 內拆分成幾個區塊

觀察一下 html 架構

## logo 的結構, 長三層


## menu 的 a 連結長出來

365, office, windows surface, xbox, 支援


## 右邊的 nav 導覽

所有 Miscrosoft, 搜尋, 購物車, 登入


## 搜尋的放大鏡圖案
- 可能要用畫的, 畫的要存成 svg
- 或是上網找


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



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


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

# header 搞定後可以收起來


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



> 可以參考 HTML5 版面 432 頁

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

複製頁面丟到以拉


量一下大小


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


像這樣一層包一層


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

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

> [慢慢修]

# CSS 命名規則

- 這邊主要是 BEM 的模式

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

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

==OOCSS==
==SMACSS==

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



<!-- 心靈雞湯

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/)

----

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

# 下午的排版提示

# 輪播的區塊

 這個點點跟暫停可以不用做

 這兩顆按鈕也可以不用做

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


手機版的變化很有挑戰性


# 實際示範

這會爆版:

寬會隨著螢幕比例縮小,高是 600

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

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


# 參考資料:

> 等比縮放
[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 這個屬性會被繼承







或是



----

# 下面的排版跟 twitch 類似


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

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

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

# 4 欄的排版


上面還有 6 欄的排版


這跟 Twitch 區塊很像

----

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

- html 結構用 HTML 5 元素

> 例如, header, section, nav

- CSS stlye 怎麼導入 html 架構
- 怎麼用 dev tool 抓 icon
- 怎麼導入 CDN 到 html 架構
- CSS 命名規則
----------------------------------
- 輪播 (carousel)的區塊
> 這個點點跟暫停可以不用做

> 這兩顆按鈕也可以不用做

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

> 手機版的變化很有挑戰性

先切好大區塊再來


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

# 連假後會檢討一下

會有很多做法, 可以上網多學

---