# 挑戰-金魚都能懂的網頁切版：側邊選單 ### 網頁網址 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``作用的位置與成果。