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

# 9/1 線上 Slack 助教

## 今日助教輪班時間

Keng Wei Chu：9/1 (三)
回覆時間：上午 9:00 -下午 3:00

## 發問規範

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

## 注意

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

## 問題

1. ：請問這一塊要如何浮出來? 我有用 position-relative 與 position-absolute來定位，但同時無法滿足pc與pad版型，會嚴重跑版，我想我應該是做錯了,請問要如何處理呢? !

助教回覆：可以採用 [z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index) 去設計

----
2.群嘉
助教好，這裡有發現一個問題就是日期套件的js在沒有日期套件的html頁面會報錯導致在日期套件以下的js都會停用，這個問題其實只要把日期套件的js放在all.js就能解決，但是我自己寫的js功能，點選課程難度網頁內容會跟著改變也是有一樣的情況就是不再該頁的時候就會報錯，這樣子就變成有一個功能要犧牲掉，請問該如何修改呢?附上[page1](https://a121515222.github.io/eighth_week/Reservation-1.html) [page2](https://a121515222.github.io/eighth_week/Reservation-2.html) 與 [github-js1](https://github.com/a121515222/eighth_week/blob/master/app/assets/js/all.js#L168)[github-js2](https://github.com/a121515222/eighth_week/blob/master/app/assets/js/all.js#L191)謝謝
>可以先用 if 判斷該 DOM 元素是否存在～
----
3. zyc
耕緯助教你好，
1）第七週作業，在 _utils.scss 使用 sass map 產生通用類別，儲存時終端機正常，但是無法編譯成功。有哪裡做錯了嗎？也附上 all.scss 。
2）第八週作業，為什麼使用手機打開網頁時字體樣式會消失？這是直接加入 Adobe font 的 cdn 不是嗎？（看不太懂他給我的這段code..）
謝謝～
> 1. [前面的部分](https://github.com/zyan-c/week7-Fixie/blob/cdb5c7ae2b43fa44f6c09b1666c7c912cd6ae910/app/assets/style/helpers/_utils.scss#L1-L3)幫我修改成[這樣](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss#L5-L8)試試
> 使用 Bootstrap 要注意自訂的權重，要改變文字大小可以用 Bootstrap 的 .fs-4
> 2. 這邊手機開啟有看到文字，Server.ScriptTimeout 是有關超時的，非字型

---
4. 沈依蓉
助教好:
repo: https://github.com/lily-oa/yoga_local/blob/master/scss/helpers/_bsutilities.scss
pages: https://lily-oa.github.io/yoga_local/
我參考同學的height api的寫法，但不明白為何他要重覆寫map-merge，code裡面分別有三個map-merge請問分別代表什麼意思？
以下連結是我不懂的code所在位置
https://github.com/lily-oa/yoga_local/blob/master/scss/helpers/_bsutilities.scss#:~:text=Blame-,%24utilities%3A%20map-merge(,(,-x0%5C.68%3A%2068px
> 可以參考[這篇](https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#using-the-api)

----
5. anna
在課程介紹course.html裡的師資介紹
我套了swiper後，老師照片就被切掉了，於是我在swiper寫overflow:visible，照片就能完全顯示，但是這樣視窗就會出現x軸，請問要怎麼讓照片不被切掉? 不知道該怎麼去改swiper的設定
>在 swiper 寫 overflow:visible 沒有問題，可以在 body 寫 overflow-x 來避免頁面 x 軸的產生
----
6. Jiang V
助教您好，請問 這個區塊 要怎麼調整成像設計稿的排版比例，因為嘗試了一些方法 ex. h-md-50 之類的高度設定，但都達不到，這是我的 repo / gh-pages 再請助教協助解惑，謝謝助教 ~
>這邊幫我加上這些來調整喔，讓外面的高度先是 100% 在來區分 50% 50%，在讓圖片高度跟內層等高

---
7. ChuanMing
老師助教同學們好，在使用scss的時候有遇到一些問題想要問問是不是有使用上的限制
這是我的 Codepen(問題一)https://codepen.io/mdbrwlxg-the-styleful/pen/yLXOXPQ
問題二如附圖，發現SCSS 連續給兩個Class中間如果有空白鍵就吃不到樣式了?!
請問這也是使用上需要注意的嗎?!
>`.banner{.sub{color: red;}` 經過編譯後會是 `.banner .sub{color: red;}`
>`.banner{&Title{.sub{color: #000;}}}`編譯後會是 `.bannerTitle .sub{color: #000;}`.class1 空格 .class2 表示 class2 要在 class1 裡面才會有效果，.class1.class2 中間沒有空格的話，表示要同時有這兩個 class 才會有效果，可以參考此篇文章的[整理](https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html)
---
8. Jessie Cheng
助教您好，這是我的 GitHub、repo（Week8 作業）
我在 layout/index.scss 的 line #31 有用了 BS 的 mixin
gulp 編譯 scss 檔時一直噴 error：no mixin named media-breakpoint-up
但在 helpers/bootstrap 的 line #4，已經有 include 整包 bootstrap（裡面有含mixin）
不知道問題出在哪呢 :smiling_face_with_tear:，謝謝助教
>這邊你把 bootstrap 相關的 scss 檔案 @import 在 bootstrap.scss 但沒有在 all.scss 中@import bootstrap.scss ，所以 all.scss 中不會吃到 bootstrap 相關的樣式，這邊可以在 all.scss @import './helpers/bootstrap.scss'; 只 link all.scss 就好
---
9. rinnya
助教您好，想詢問swiper效果的問題，在手機模式有時會是三行有時會變成六行，想了解問題出在哪裡，再麻煩助教了，謝謝
> 這邊觀看 codepen 手機模式是一行3個沒有問題，768、 992 px 時會分別改變模式
----
10. 周周
助教您好~這是我的repo&pages，課程介紹頁面yogacourse.html，看起來有被推擠到，但查不出來是那個影響到﹑想請問助教，感謝您。
> 這邊是因為 swiper 的關係導致的，可以在 body 加上 overflow-x: hidden ，讓網頁的寬度不再延伸導致頁面看起來被壓縮