---
tags: 大學生體驗營 - 2021 夏季班
---

# 7/29 線上 Slack 助教

## 今日助教輪班時間

Luna： 7/29 (四)
回覆時間：下午 1:00 - 下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. 小羊：
老師助教同學好，我想請問關於BS5 class樣式設定的問題，這裡附上[codepen連結](https://codepen.io/eqsmebaz-the-selector/pen/mdmXQoz)
1. 我分別在首頁 a 標籤和特色 a 標籤下了 ping-fang 和 sf-pro 字體樣式，雖然在檢查有吃到字體樣式，但看起來沒有什麼變化，想請問是不是因為沒有正確的載入？
2. BS5除了另外在 a 連結寫一個 class 在 css 更改 hover 的字體顏色，然後下 !important (我有在首頁a連結設定nav-link-hover)，有沒有方法可以在 class 上面下語法就可以變更 hover 樣式或 active 呢？
謝謝老師助教～

> 助教回覆：
> 1. 看不到字體改變的話，就是瀏覽器在電腦中找不到這個字體。
> 可以透過安裝字體檔案，或是像 google font 一樣，利用引用檔案的方式套用字體，就可以顯示設定的字體囉。
> SF Pro Text 與蘋方繁體都是 apple 系統獨有的字體，不過目前蘋果還沒有公開提供檔案給網站引用，這邊只要有設定到就可以囉～
> 2. 如果你想要改變連結顏色，可以使用 [Colored links](https://bootstrap5.hexschool.com/docs/5.0/helpers/colored-links/)，並[透過變數修改主題色](https://bootstrap5.hexschool.com/docs/5.0/customize/color/)，例如將 `$primary` 改成 `#916000` 等
> - 提醒你可以把 Material icons 在 Code pen 的 CSS 設定中引用連結 https://fonts.googleapis.com/icon?family=Material+Icons
> - 參考資料：[How to use Apple's new San Francisco font on a webpage](https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage)

---

2. 小松：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/120061203/pen/XWREZay)。
我原本預期「CSS 第95 行會有選單淡入淡出的效果」，但卻出現「預期外的結果是 選單直接出現」，想問下問題出在哪裡？
謝謝助教~~

> 助教回覆：
> transition 是沒辦法從 `display: none;` 轉變到 `display: block;` 時，利用動畫呈現的哦！
> 如果你想使用淡入淡出的效果，建議你針對高度或是透明度去做轉換，這邊做了一個小小[範例](https://codepen.io/Iotalh/pen/dyWmeyd)給你參考～
> 參考資料：[前端新手村 Transition](https://ithelp.ithome.com.tw/articles/10195205)

---

3. 薰：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/chiaoshin/pen/ExmEgjX)，在7/28昨日每日任務裡頭，關於OOCSS樣式與結構分離中，一開始把border分為樣式，因為他可以放顏色在裏頭，但是解答卻是在結構，想問有什麼常見的方式，去區分結構跟樣式?是不是只要是顏色就是樣式? 麻煩助教了，感謝。

> 助教回覆：
> 因為這邊的 border 設定的顏色是 transparent，只是要設定 border 所佔的 1 px，並不包含顏色，後面也有另外設定 border-color，所以才會歸類在結構。
> 區分方式就從是否是設定顏色下去分沒錯！
> 這邊有參考 [bootstrap](https://bootstrap5.hexschool.com/docs/5.0/components/alerts/) 的設定下去設計的，如果想多了解應該如何區分結構跟樣式，也可以去參考 bootstrap 的設定～

---

4. 羿宣：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/Ann828/pen/OJmQGPY)，我原本預期「CSS 第33 行會出現下拉式選單」，但卻出現「沒有出現」，想問下問題出在哪裡？昨天有針對同問題詢問過助教，有調整過程式碼了，但還是不知道錯在哪裡，想請問該怎麼改才能成功使用jQ？謝謝助教了

> 助教回覆：
> 在 CSS 第 34 行使用了以下設定：
> ```css
> .mobileNav .active{ max-height: 315px; }
> ```
> 在 CSS 第 44 行使用了以下設定：
> ```css
> .mobileNav { max-height: 0; }
> ```
> 在 JS 第 4 行使用了以下設定：
> ```javascript
> $('.mobileNav').toggleClass('active');
> ```
> JS 這行的意思是：
> 在 `.active` 這層加上 `.active` 這個 class，也就是變成：
> ```htmlmixed
> <ul class="mobileNav ps-0 fs-s active">
> ```
> 但是 `.active` 在 CSS 的設定中是：
> 在 `.mobileNav` 裡面那層的 `.active` 設定 `max-height: 315px;`
> 也就是對於下面結構中的 li 才會產生影響，不會對於上方那種 class 設定產生影響
> ```htmlmixed
> <ul class="mobileNav ps-0 fs-s">
> <li class="active">...</li>
> </ul>
> ```
> 但是因為 `.active` 的設定比 `max-height: 0;` 前面，因此會被後者覆蓋。`.active` 設定應該要放在 44 行之後，才會覆蓋 `max-height: 0;` 的設定。
> 在 CSS 設定 `.active` 時，可以不用放在 `.mobileNav` 底下設定，也就是不用寫成 `.mobileNav .active`，寫成 `.active` 就好。

(這邊只能由助教編輯，問題請到 thread 上詢問)