---
# System prepended metadata

title: 挑戰-金魚都能懂的網頁切版：側邊選單
tags: [HTML, CSS]

---

# 挑戰-金魚都能懂的網頁切版：側邊選單

###### tags: `HTML` `CSS`

### 網頁網址
https://judyyutong.github.io/my-projects/SideMenu.html

### 學習重點
- Font Awesome CDN Webfont - 引入外部樣式表插入現成向量 icon
- CSS: ``linear-gradient`` 屬於 ``background-image`` 漸層不是你以為的「顏色」
- CSS: ``display: flex``與``display: block``垂直區塊排列
- CSS: ``box-sizing: border-box;``不囉唆的直覺視覺長寬
- 偽元素「pseudo element」``::placeholder``；``::before``；``:hover``

### 1. Font Awesome DN Webfont 向量icon
##### 在<head>引入樣式表＋尋找想要的icon名稱，複製選定icon官網所規範的<class>寫法，套用在HTML中即可顯示。

```htmlembedded=
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
```

```htmlembedded=
<i class="fa fa-gavel" aria-hidden="true"></i>暴力班</a>
```
![](https://i.imgur.com/DSJVKl9.jpg)

套用後「暴力班」文字前即出現「木槌 gavel」圖示。

但要留意不同版本的<class>寫法會有些出入，此處使用v4.7.0 https://fontawesome.com/v4.7.0/icon/gavel

下面 Version 5.0.0 的寫法則更簡潔，
記得要引入相對應版本的樣式表搭配使用才生效。
```htmlembedded=
<i class="fas fa-gavel"></i>
```


</head>
scalable vector icons
```htmlembedded=
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap" rel="stylesheet">
```

### 2. CSS: background-image: linear-gradient

##### 指定漸層要使用``background``或是``background-image``。

雖然容易認為「漸層」是一種「色彩」，但在CSS裡想指定漸層得用``background-image``，
**並非**``background-color``，
因為``background-color``是用於指定純色。

[Chris Coyier: "While declaring a solid color uses background-color property in CSS, gradients use background-image."](https://css-tricks.com/css3-gradients/)

##### 重點在於給予方向與顏色值
```css=
background-image: linear-gradient(0deg, #1f4037, #99f2c8);
```

##### 混合技，也可以在漸層色之下再添加圖片url
```css=
background-image: linear-gradient(direction, color-stop1, color-stop2, ...), url('url'); }
```
### 3. CSS: ``display: flex``與``display: block``相似之處

##### 垂直區塊元素的控制

```css=
display: flex;
flex-direction: column;
```
```css=
display: block;
```

以上兩種寫法，都能造成容器內元素由上往下垂直排列。

> 自己的疑問：有點不理解，如果只是要達到垂直區塊排列， ``.side-menu``要用``display: flex``+``flex-direction: column``，但是``nav a``卻只簡單使用``display: block``就好？因為我實際測試把``.side-menu`指定為``display: block``其他不變，版面依舊保持原樣，並沒有跑位...

金魚切版影片段落
[10:00 display: block](https://youtu.be/yB3_LtwBiaE?t=600)
[15:07 border-box](https://www.youtube.com/watch?v=yB3_LtwBiaE&t=907s)

### 4. CSS: box-sizing: border-box
- 設定之前瀏覽器有捲軸：*可能因為有``padding``所以對瀏覽器來說可視空間某部分被佔用，看不到容器全貌才產生捲軸？(不確定)*

- 設定之後瀏覽器捲軸消失：元素本身寬高所佔空間精準，設定多少就是多少。

看起來，``border-box``的作用有點類似 Adobe Illustrator 中的「筆畫內側對齊」——元素本身真正路徑的長寬**外貌**不會因為「筆畫」粗細的增減而看起來有差異（類似對內的padding和對外的margin），路徑尺寸設定多少容器的視覺最大範圍就是多少，至於被筆畫佔據後中間的留白所剩為何，電腦會扣除筆畫粗度後自動生成，不需要特地計算留白。

![](https://i.imgur.com/dJjO4RC.jpg)



### 5. 偽元素Pseudo Element --``::placeholder``；``::before``；``:hover`` 

自己覺得偽元素有點類似語言裡面「副詞」的概念？
Pseudo表示「偽」，也就是說它並不是有實體的元素，必須依附在「真」元素上才會發揮效用。

[selects elements that are in a specific **state**
](https://www.w3schools.com/css/css_pseudo_elements.asp)[to style specified **parts** of an element.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)

上面兩句話指出，偽元素是關乎「狀態」和「部位」。

- 例如``::before``可以作用在什麼東西「之前」的那個位置，插入一些什麼放在那邊。這個所謂「之前」，必須相對於一個具體的「元素」，這個概念才會發揮意義。
- 又好比「在桌子的上面放一杯水」，必須先找到「桌子」這個實體，才找到它的「上面」，才能在這上面「放置一杯水」。

- 偽元素還可以抓到一些非實體內容並對它進行調整，像是``placeholder``本來只是``<input>``的屬性(attribute)之一，表示「輸入欄」尚未輸入任何資料時的「提示字串」，雖然最後在瀏覽器上看起來也是以「文字」現身，但``placeholder``的「字串」，和一般被頭尾標籤(tag)所包裹的「文字」，是不同的東西，
偽元素``::placeholder``則可以對這個字串進行調整，例如：文字顏色。

```css=
::placeholder { 
            color: #fff;
        }
```

![](https://i.imgur.com/trqhKHF.jpg)


- 又例如``nav a+a::before``表示運用「偽元素」去抓取選單中的超連結的前面（選單呈垂直區塊排列所以前面變成>>>上面）

```css=
nav a+a::before{
            content: '';
            position: absolute; 
            border-top: 1px solid rgba(255, 255, 255, 0.7);
            left: 10px;
            right: 10px;
            top: 0px;
        }
```

![](https://i.imgur.com/UbJruva.jpg)

![](https://i.imgur.com/gjGit2J.jpg)

上圖語法表示在這個超連結的「前面」，創造一條粗1px的淺色線條(運用上邊界製造)，且距左側位移10px，距右側也位移10px，看起來就像是線條相對於選單的邊界往內縮，而不會讓線條完全與選單色塊稱滿相觸碰。

下圖語法則是將線條換成距離左右兩側更遠的粗紅線，更看得更清楚``::before``作用的位置與成果。