# 9/09 CSS3 基礎實作
###### tags: `CSS3 基礎實作` `2021/09/09` `進度筆記` `前端心得`
---

# 整日都是課堂練習

## 今日講課-上午的部分

林大大代課~

做 RWD 版面的架構, 一個 windows 微軟頁面仿切大概切五天

## 參考資料:

https://web-design.vip/wp-template.html#download

https://www.ibest.tw/p05.php

---

## 螢幕的解析度

1920px 的定義, 和 1080px 的定義, 要怎麼預留空白畫面, 做出焦點畫面

## 自己縮去掉工具列/沒去掉工具列


# 這四頁的 html 結構要求要長的一模一樣

html 結構寫好後就不能改了, 遇到手機的會發現寫不太出來

# 分析 HTML 結構

- 接下來 id 用不到了, 到 JS 才用到

- 以 class 為主


## 做出左邊側方欄位


接著 AAAAA 用 a 標籤弄出超連結

## 完成後應該像這樣


## 做出右邊側方欄位


右邊一個 class 元素 包三個 img

div.class.content
元素 標籤 名字

.class>.img*3  

## 複習 box-sizing: border-box


- 記得他會消除 border 和 padding !

## 滿版的定義


## 參考資料:

https://ithelp.ithome.com.tw/articles/10259033

# vh 跟 vw


width:100vw ; height:100vh → 滿版網頁

width:100vw ; height:200vh → xy軸都會跑出網頁捲軸(爆版)，因為x軸多出捲軸的寬度

如果 vh 設 100, vw 設到 200

你的可視範圍都會被拉伸, 但會發現底下的卷被卡掉

所以你寫 100vw 會因為右邊的卷軸寬度卡掉, 像 chrome 的卷軸寬度視 17px

而不同的瀏覽器寬度(包含卷軸)的不同

因為瀏覽器的寬度所以 width 不太會用 vw, 因為不太能去扣掉 px, 通常 width 都會用 100%

---

# div 會填滿一整行的問題

- div 元素有個天生的屬性叫做, display 而這屬性的值:

- block
- 佔滿父層寬度
- 元素是可以設定寬高的

- inline
- 不會佔滿父層寬度
- 以內容大小撐開元素寬高, 無法去做設定寬高

- inline-block
- 不會佔滿父層寬度
- 但可以改寬高
- 使用上有奇怪間隔

- table 的 各種 display 帶過
- ul li display 有 list-item

---

## 預設的 margin 和 padding

ul 和 li 有預設的 margin 和 padding 使用後還要消除

- 在 html 結構上選擇一個好的標籤跟 SEO 有關係

- ul 的 list-style-type 可更改, disc 就是點點的意思

-----

# 課堂練習 - 電腦版螢幕 CSS

## 記得 html 結構不能動

- 去更動 CSS 樣式表就好
- 能做就先往下做

做好的目標 ↓


----

# 下午部分
# 課堂講解 - PC 螢幕版 RWD CSS

## 先從左邊開始寫起
- 先從 container 開始, 網頁可能越來越高, 因此先寫 width


因為高度沒甚麼好寫的, 剩下部分都要用內容去撐開

## 來看左方欄位的寬高


## 接著看右方欄位的寬高


會發現掉下去, 因為被佔滿版

## 一個一個推


從 LOGO 開始定位, 不要用 position

接著 LOGO 用 padding 去推,

然後 UL 內的文字也被 LOGO 用 MARGIN 去推, 因為同層, 文字類型的 font-size 會往下層傳遞

## 開稿的時候 pt 跟 pixel 1:1

要記得 px 是螢幕最小單位, 在 72dpi 的時候, 1px=1pt, 所以要看開稿的時候螢幕是不是 72dpi

## 參考資料:

https://blog.akanelee.me/2018/07/31/dpi-px-pt-dp-sp/

## 接著去掉底線

去掉底線 text-decoration:none

## 更改文字間距

下 line-hight: 1, 表示跟字本身的元素大小一樣


----

## 右邊欄位

- 第一種, 用 margin 置中, 再用 padding 推下來


- 第二種, 用 postion 絕對定位


## 右邊欄位分配寬度


## 接著把右邊欄位改一下

- 因為都分 33% 所以 看起來會有點位移

## 把中間的方塊弄胖一點就會撐開了

不過會把其他方塊擠掉 所以要下 calc 去減掉, 然後記得用 margin 造出空隙


因為 class 可以有共通的屬性寫法, 所以可以下一個 CSS 屬性去寫共通的 寬 和 float


# 老師的 PC RWD code:


----

# 小螢幕 PC RWD 講解
- 就是圖書館那種很老方方正正的電腦

先調整 右邊方塊的寬高, 和位置


# 調整右邊欄位上方的長方塊

因為上面的方塊佔滿了整排, 那最上面的方塊高度變為一半的情況下, 就可以開始調整下面兩個方塊, 接著推下面的方塊


下面兩個方塊因為高寬都是一半, 接著用左邊的方塊去推右邊方塊 (margin-right); 接著為了讓版面看起來整齊, 下面兩個方塊的高度變成各拿 (50% 減 10px / 2) , 這樣兩個方塊才平均大小


# 下一個平板的 RWD
- 怎麼調整左方欄位到最上面
- 左方欄位的字體怎麼平移
- 右邊怎麼那麼粗

# 手機板 RWD

做完後, 滑鼠滑到圖片上跳出選單, 或是換圖片

----

# 平板版 RWD

# 用 dev tool 滑鼠選擇器 iPad 看個稿, 看著設計稿切看會不會一樣

# 調整左邊欄位

版面左邊離 logo 大約是 35px, 右邊離文字也大約是 35px


寬(%)高(pt), 上顏色後, 下 padding 10px, 靠版面左右邊各是35px, 用內距去調整子層元素 → logo

# 調整 logo
logo 上下調整寬高, 因為 div 佔滿了整行, 下 float left 去調整,


# 調整 ul 的文字

消除裝飾點效果

想辦法把它移到上面的欄位


對包住文字的大外框 ul 下 float right 去調整


# 預設 的 ul 會頂出來, 多個白邊


接著因為 a 的 display inline 特性, 無法對他下寬高或是 padding(雖然有吃), 但下 margin 和 padding 會影響到他

在外框 ul 下了 margin 會讓 ul 往上抬. 再下 padding


## Block區塊元素

．元素寬度預設會撐到最大，使其占滿整個容器
．可以設定長寬/margin/padding，但仍會占滿一整行

# 在 li 標籤調整文字靠右
以及讓文字跟左邊的 logo 與邊距相同 px

下 margin-right 和 text-align


下 float-right 後會讓文字散開

下 padding 去讓文字往下推

# 調整文字間距(看設計稿字距)

調整文字大小, 幫文字去底線

用 line-hight: 1(字多高這行就多高), 調整文字間距, (80px-24pt/2) 就是剩下的高度


幫文字去裝飾, 下 float left(第三點)

改變區塊元素 a 的文字間距

## 參考資料

https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82

# 再來 額外補充怎麼去調整 ul 的排序變成跟版面一樣散開

# 第一種 - 用 last-child 去覆蓋原本的 class

如果一樣是 margin-right: 45px


用後面的 class 來覆蓋原本的

# 第二種 - not() 選擇器

只要符合 menu-btn:not(:last-child){} 但除了 last-child 不會被選到外, 就選得到

<!-- # 第三種 -

從 左到右排, 父層文字 float 右邊, 子層 a 標下 float: left 反推回來

 -->

----

# 右邊的大版面


一樣要浮起來 float left

調整位置

推一半在減掉物件本身的高度


100vh-100px/2 - 右邊欄位高度 (800px /2)

# 右邊的 content 寬高

700*800 上顏色

# 用 margin 0 auto 去調整右邊欄位位置

表示上下邊界為0 ，左右為auto 表示自己均分


# 想讓右邊欄位置中

還可以用 position, 比較快速定位

也可以算 padding 去推三個欄位的框框位置, 比較繁瑣但不會擠壓到上方欄位

# 最後三個欄位

跟小螢幕一樣


# 課後任務 - 作業全完成

1. 四個版的切版都切好
2. 三個圖片的背景圖片切換 ( transition)
3. 滑手機板的頁面, 滑到按鈕上會浮起, 但改手機的按鈕後其他四個的 RWD (PC, small screen, ) 的 html 架構都要改
(提示 display: none 屬性)
4. media queries 怎麼用
5. 怎麼帶一個圖層遮在你圖片效果的最上面

## 參考資料:

by 珮婷 同學
[用 HTML 與 CSS 製作簡單的導覽列](https://medium.com/@mingjunlu/building-a-simple-navbar-with-html-and-css-setting-up-the-skeleton-212fb8767cb5)

## 三層漢堡
[純HTML/CSS製作手工漢堡](https://ithelp.ithome.com.tw/articles/10203995)

[RWD漢堡選單練習](https://w3c.hexschool.com/blog/5054d6fe)

---