--- tags: 網頁切版直播班 - 2021 夏季班 --- # 8/20 線上 Slack 助教 ## 今日助教輪班時間 Bingbingboom：8/20 (五) 回覆時間：早上 9:00 - 中午 12:00，下午 1:00 - 2:00 ## 發問規範 老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？ ## 注意 1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖 ![](https://i.imgur.com/nHE3sOx.png) 2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖 3. 助教會依照 Slack 上的順序回覆問題 4. **以下問題區塊只能由助教自行增加** 5. 助教會將回覆寫在下方問題區塊 ## 問題 1. **alpha：** 助教您好 目前在搭配使用 swiper 發現沒有效果 不確定是哪邊有問題 可否協助查看 [Github](https://github.com/alphatero/css_week6) > 助教回覆： > 因為同學將[這一段](https://github.com/alphatero/css_week6/blob/252fd7dd0b38ad3f9283f5d9246dbe9678221a1d/app/index.html#L301-L312)放在 index.html 裡，這樣在程式碼編譯完之後，這段就會跑到 `<body>` 內，而 swiper 的 CDN 那些都還沒讀取到，所以會沒有效果哩。建議可以將這一段放到 all.js 內哦，這樣就沒問題哩！ （記得要移除 `<script>` 標籤） --- 2. ZOE WU： @Bingbingboom 助教您好～ 我的作業連結：[repo](https://github.com/kaya040121/exhibitions) / [pages](https://kaya040121.github.io/exhibitions/) 問題 1. 想接續請問助教關於 nav-scroller 的部分，目前如果以電腦將網頁介面縮成 mobile 規格觀看，navbar 似乎無法以滑鼠捲動，請問這個部分是用電腦操作的限制嗎？（如果用 F12 開發者工具模擬檢視 mobile 規格是可以捲動的） 問題 2. 請問助教 week6 主線任務這次有一個字體 “Noto Sans CJK TC” 是要先下載字體再設定套用嗎？想瞭解字體下載的情況如何引用？字體採本地端檔案時要如何設定、放在哪個資料夾中呢？ 再麻煩助教回覆，謝謝！ > 助教回覆： > 1. 對的哦，是電腦操作的限制哩。如果是使用行動裝置的話就可以使用觸控的方式來滑動 ~ > 2. 若是使用下載的字型可以在 assets 內新增一個 fonts 資料夾來放，並嘗試使用 @font-face 來引入哦 （測試成功摟 ~） 我是下載 [這個](https://www.google.com/get/noto/#sans-hant)，然後照上面說的在 assets 中新增 fonts 資料夾來放（記得解壓縮），在 style 內新增一個 SCSS 檔案來使用 @font-face 設定字體，並在 all.scss 一開始 @import > ```=css > @font-face { > font-family: "Noto Sans CJK TC Regular"; /* 這個可以自己取名 */ > src: url(../fonts/NotoSansCJKTC/NotoSansCJKtc-Regular.otf); /* 這是我的路徑 */ > font-weight: normal; > } > ``` --- 3. zyc： 助教您好，想請問關於 [navbar code](https://github.com/zyan-c/wk6-EXHIBINECTION/blob/5610effe4b7746c33f3de2450d09e7a86e730968/app/layout.ejs#L23-L51) 的問題 問題1：如何讓 sign in sign up 的區塊出現在右側？ 問題2：想確認自己的方式正不正確。 我自己嘗試用 dev tool 檢視，發現在 lg 版以上的 .navbar 如果換成 `justify-content:flex-end` 之後就可以讓他們出現在右側。如果我把 BS 的 _navbar.scss 加到專案內，然後加入 `@include media-breakpoint-up(lg){ justify-content:flex-end;}` 這段 code，你會建議我這麼做嗎？ 問題3：如何讓 collapse 的內容出現在 navbar 下方？ 附上 [repo](https://github.com/zyan-c/wk6-EXHIBINECTION/tree/master/app)、[pages](https://zyan-c.github.io/wk6-EXHIBINECTION/)，謝謝助教!! > 助教回覆： > 問題 1. 2. 可以直接使用 .justify-content-lg-end（這邊提醒一下應該是用 container 不是 container-fluid）因為同學是用 navbar 包 container，navbar 子層就只有一個 container 元素並佔滿整個空間哦，在 navbar 使用 .justify-content-lg-end 是作用在 container 上 > 問題 3. 可以嘗試使用絕對定位的方式。（因為同學的 Sign in .. 是和票券 icon 放在同一個 div 內，如果將 ul 移出 div 移到 icon 後方就會出現在下方了） --- 4. anna： 助教您好~ [page](https://annanaha.github.io/week6-hw/index.html) / [repo](https://github.com/annanaha/week6-hw/tree/main/app) 這是我的檔案 1. layout.ejs 檔案裡面: offcanvas 購物車預覽會蓋掉我的 header，所以在 header 上加了 style="z-index:1090"，但購物車預覽仍然壓住header，另外寫 z-index 的 class 也沒有作用 2. 在 design-taiwan.html 裡: 為甚麼下面的圖片在電腦的手機版看起來是偏方形的，但用手機看的時候高度那麼高呢? 3. offcanvas 購物車的圖片該如何保持比例: 原先是用 ratio 讓圖片保持 1x1，在外層 div 寫上 ratio ratio1x1，但加上去圖片就不見了。後來我用了object-fit，但不太懂 object-fit 的用法，目前是在圖片和外層框都寫上120px，使用 class w-120, h-120，（圖片寬高的class寫在style.css裡） 這樣寫不知道有沒有問題，很好奇圖片本身一定要寫寬和高才會起作用嗎? 4. 不太懂 h 標籤要怎麼下： 一個頁面可以有多少 h1, h2, h3? 5. 在 index.html 裡: 導覽列（音樂.設計...）的 hover 還是會跳動，該怎麼解決呢? > 助教回覆： > 1. 可以在 .offcanvas-end 設定 top: 98px;（預設是 0，所以會蓋住 header），另外可以嘗試設定 [Backdrop](https://bootstrap5.hexschool.com/docs/5.0/components/offcanvas/#backdrop) 消除預設透明黑色背景 > 2. 建議可以先嘗試將高度依照設計稿來設定，不要使用 .h-100 試試看 > 3. 圖片如果只有設定一邊，只有寬或是只有高，就會依照原始圖片的比例來伸展。所以如果是想讓圖片方正的話，可以直接依照設計稿設定寬高哦。因為寬高都固定的話，可能就不會是原始圖片的比例，會導致變形，所以都會加上 object-fit 哩 > 4. 一個頁面只會有一個 h1，是用來表示網頁中最重要的資訊。而 h2 ~ h6 沒有限制，可以自行依照標題的重要程度依序使用哦，標題像是整個區塊的主題（ex. 熱門特展 ..），通常人名、產品名字、展覽名稱，也都會使用標題標籤哩 > 5. 可以先在 .nav-link 設定一個透明的 border 線條哦，像是：`.nav-link{ border-bottom: 1px solid transparent; }` --- 5. Jiang V： @Bingbingboom 助教您好，目前兩個問題想要請教， 1. 熱門特展這個區塊的 fb icon 對齊問題，請問要如何讓他貼齊到像設計稿位置底部，目前試過了 justify-content-end justify-content-between 都失效，請問這裡需要如何調整程式碼 ? ![](https://i.imgur.com/vzo2dYr.png) 2. 另一個問題是 購物車 offcanvas 這個區塊，也是同樣是對齊問題，想讓購買數量這個部分調整到像設計稿位置，想請助教協助調整程式碼，這是我的 [repo](https://github.com/viccjiang/2021layout_week6_exhibinection/blob/main/app/index.html) / [gh-pages](https://viccjiang.github.io/2021layout_week6_exhibinection/)，再請助教解惑，謝謝 ![](https://i.imgur.com/owBOLQR.png) > 助教回覆： > 1. 可以在日期與 fb icon 外層的 div 設定 .h-100 並使用 .justify-content-between > 2. flex 的設定建議可以移到外層 .col-* 使用，然後將多餘的 div 移除，大致結構會是： > ```=html > <div class="col-2 d-flex ..."> > <span> ... </span> > <p> ... </p> > <span> ... </span> > </div> > ``` --- 6. roger： 助教你好，我想請教你兩個問題 1. 這區塊要如何做成跟設計稿一樣？是要在這區塊在設定一個 row 嗎？ 2. 另外想請問 fb icon 要如何與上面的日期文字推擠出距離，有在外層加了 sapce-between 但是還是沒效果？ 附上我的 [pages](https://james73007.github.io/week6/) ![](https://i.imgur.com/bwcX287.png) > 助教回覆： > 1. 不太明白同學指的跟設計稿一樣的意思，是指寬度跟設計稿一樣嗎。如果是這樣的話可以嘗試依照設計稿設定 width: %;，或是使用 row 搭配 col 來設定寬度哦 > 2. 這邊同學使用了 .d-lg-block 會讓整體變成區塊元素，就不是 `display: flex;` 摟，可以改為使用 .d-lg-flex 就可以哩 --- 7. anna： 助教您好，我有按照您上面的步驟載入字體，想問我這樣的路徑有正確嗎? 然後不太懂路徑要怎麼寫，是從檔案本身開始算起，往外推到 assets 資料夾嗎? 比如上面的點點是怎麼算的? > 助教回覆： > 因為是在 all.scss @import 所以可以從 all.scss 開始往外推算。從 all.scss 往上一層到 assets 資料夾在到 font，以同學寫的路徑來看應該是沒問題的哦，如果沒辦法成功的話，可以提供給我整個檔案，我來幫你測試看看哩 ~ --- 8. Huanan： 助教好 ，目前做第八週作業，首頁的聽聽他們怎麼說打算用 swiper 做，但是在設定斷點跟欄位時都會跑掉，不知道哪裡設定錯了，要麻煩助教幫忙，附上[網頁](https://yx-chill.github.io/doyoga/)及[程式碼](https://github.com/yx-chill/doyoga/blob/master/app/index.html#L279)(279行開始)，謝謝助教 > 助教回覆： > 這邊在一開始加上 `slidesPerColumnFill: 'row'` 就可以哩，因為預設是按 column 來擴充，將其改為 row 就可以摟 ~