---
tags: 網頁切版直播班 - 2021 夏季班
---

# 8/2 線上 Slack 助教

## 今日助教輪班時間

Hong di Chen：8/2 (一)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1. 穎旻：
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
> 助教回覆： 因為在....所以..，於是產生 ... 的結果

---

1. 陳 Sam:
老師助教你們好~我想請問一下，目前作業上導入bootstrap 5 大部分的排版基本上使用bootstrap 5的語法就可以達成，我想問的是在網頁上我們之前在每個區塊都會使用語意去編排管理，那現在我的網頁上可能會有很多，例如:d-flex，justify-content-center....，那我會不會很難找到我要編輯的區塊，還是說我在每個區塊一樣還是，header-title，.footer-list....，後面再接著我要使用的功能d-flex,align-items-center....。如果是後者的情況，我會不會下了擁有語意化的class名稱，可是沒有使用到，畢竟bootstrap 5已經都幫我寫好。
> 助教回覆：可以嘗在各區塊開始時寫註解，例如

<!-- 區塊名稱 -->

2. 黃羽均
想請問助教第五周的作業
最左邊的選單
高度會建議用height:100%還是100vh
這兩著的差異在哪呢?
> 助教回覆： 100vh，因為 height: 100%; 沒辦法佔滿螢幕高度（除非子層很多撐起來）; 差異在於，100% 會適應父層高度，而 vh 就是當前屏幕可見高度的1% 。

>當元素沒有內容時候，設置height:100%，該元素不會被撐開，此時高度為0，但是設置height:100vh，該元素會被撐開屏幕高度一致。
3. 游順傑
助教您好 想了解BS5中$primary: $blue !default; 這邊的!default是什麼?
> 助教回覆： !default 的意思，給予變數默認的值，這一個值指派給變數僅當該變數沒有被定義，或者其值null。否則，將使用現有值。
4. 陳 Sam:
想請問一下，父層flex底下兩個子層一個寫死寬度，另一個寬度100%，為什麼寫死寬度的子層會被吃掉一部份哭度。
> 助教回覆：當你設定 flex 的 container 時，會有幾個預設值

{
  flex-direction: row ;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-shrink: 1;
}

>此時你的子層會被強迫變一行，所以他們的相加的寬度會被限制成父層的寬度，接著預設值 flex-shrink: 1; ，防止原本的子層寬度超過父層，也就限制了寬度

.d-flex {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap
}

> 這樣就變回來囉
5. 蔡明達
老師助教同學們好
這是我的 Pages
上層使用 mb 向下推
下層使用 pt 向上推
但是兩者間有一點重疊了，想詢問助教遇到類似的問題該如何解
> 助教回覆：a 標籤要有 display: block;
6. 蔡明達
老師助教同學們好
目前實作第五周的功課
有幾個小問題想要諮詢
1.橘色框的出現是點選 表格裡面 row 的資料項進而跳出，所以應該要好好瞭解 BS 裡面的 MODAL 嗎
2.紅色框在點選時應該使用 collapse，未點選時箭頭向下，點選時箭頭向上，請問在 BS 裡面有類似的章節能夠給我一點方向嗎：Modal 裡面包 Collapse？
謝謝老師助教與同學們 --
> 助教回覆：
> 1.因為助教這裡不太懂橘色框指的部分，所以想問是
> [這裡](https://xd.adobe.com/view/636097e2-bd56-4710-9483-0f40e0063a9a-3633/screen/96276e44-04d1-43be-98d3-95c6d71c6fc7/)點進去，彈跳出 Modal 的意思嗎
> 2.的確是，Modal 裡面包 Collapse，以下給你[參考文件](https://getbootstrap.com/docs/5.0/components/collapse/)

7. ZOE WU
@cuboid 助教您好：
我是 ZOE，正在做眼鏡形象頁 index，想詢問關於使用 Gulp 環境開發下，images 的使用問題。
附上我目前開發進度（已完成 faq 頁、index 開發中）
GitHub Repo
GitHub Pages
我原本圖片引用都是使用線上網址連結的方式，考慮到未來維護想改採本地端連結圖片資源，於是剛才下載圖片放入本地端 gulp 的開發資料夾中 \app\assets\images 中；但將圖檔放入資料夾後原本設定的 CSS 就吃不到，然後圖片連結本地端資料夾位置，結果頁面上就會變成空白。
想跟助教確認一下問題可能出在哪裡？感謝！
> 助教回覆：助教這裡打開你的[ repo](https://github.com/kaya040121/glasses-web-design/tree/master/app/assets/images) ， \app\assets\images 裡，發現是空的，你有嘗試將圖片 push 到遠端資料庫嗎？
8. zyc
Cuboid助教您好，上週7/30有提問關於如何讓首頁的 hero 背景圖可以有 100vh 的效果，也有依照 @JasonLu 助教的提議更改導覽：
.topNav{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
但是設定成 absolute 之後，會吃掉其他頁面的內容。像是 _optical.html 頁面下 ul.productMenu 的 li（第12，13，14行code）完全被覆蓋掉了。其他頁面也是，請問這個問題怎麼解決呢，謝謝
附上 repo 和 gh-page
> 助教回覆：在 main 設置 margin-top: 109px;
> (109px 是你的 navbar 高度)
9. Page Shih
老師助教同學們好，這是我的gh-page
跟上面的同學有一樣的問題，
在使用gulp開發的時候有看到header有圖片，
但是上傳到gh-page圖片就顯示不出來了，
好像是用background-image帶入網址上傳之後都會掉圖，請問這個要怎麼解決呢
附上本地端開gulp連結都還在的截圖
> 助教回覆：
> " . ./"代表上一層目錄

background-image: url("../images/banner.png");

10. Gill
老師助教同學們好，
我以link的方式載入boostrap的css，然後以import的放是去組合我的all.scss讓他編譯成all.css放置boostrap.css的下方(圖一)
想詢問我在寫個頁面的樣式時，他是否可以吃到boostrap的變數呢?還是說要自己再去定義變數?
因為我在寫_base.scss的時候，他一直顯示我的第三、四行有錯誤(圖二)
> 助教回覆：需要請同學給我 gitHub repo 和 gitHub Page 網址，我才能除錯喔～

11. Page Shih
好意思助教，上一批有問關於上傳gh-page的部分，可是我改了之後還是一樣，修改之前我在header的background-image，網址前面有加".."
background-image: url("../images/banner.png");
但我在下面的聯名設計鏡框背景圖沒有加".."
background-image: url("/images/bg.png");
結果這兩種寫法在gh-page都一樣沒有顯示，所以這兩種網址應該都不可行?還是說不是網址的問題呢?
另外我也檢查過app和gh-page的asset裡面這兩張圖都是在的
而現在改過的背景圖都是用第二種寫法，我在本地開gulp的時候圖片都是在的
> 助教回覆：你的圖片確實有新增了，但我透過更改你的 Page 成 ```"../images/banner.png"``` 都有顯示出來～
> 另外我去查看你的 repo 是寫 ```"/assets/images/banner.png"```
> 而非

> 你可以再試試看，並記得 push 最新的修改
> 猜測1. 你可能改在 SCSS 結果沒編譯進 all.css 裡
> 你可以看一下你修改後 all.css 有沒有編譯進去或是打開 開發者工具查看路徑是否和你修改的相同
![](https://i.imgur.com/9CCq1J8.png)
![](https://i.imgur.com/yShB4qT.png)
![](https://i.imgur.com/zmfwVlO.png)