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

# 7/28 線上 Slack 助教

## 今日助教輪班時間

小孫：7/28 (三)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1. 哈哈哈哈娜：
助教好 我在練習week3和week4作業
在本地用gulp看網頁都是正常的
但上傳到github時發現header的logo消失了
而且一直抓不到那張圖，想麻煩助教解惑～～
github repo https://github.com/cih1120/HexSchool__2021wee3
github page https://cih1120.github.io/HexSchool__2021wee3/

> 助教回覆：
妳好 這邊檢查哈娜的 logo 路徑為「絕對路徑」
background-image: url(/assets/images/logo.png);
因為原先 SCSS 的「絕對路徑」抓不到所以無法正確顯示，這邊 logo 最終是要引入到 assest / style / all.scss 的，會建議修改成「相對路徑」：
background-image: url(. ./images/logo.png)

---

2. 粘勝凱 ：
助教您好，我在375px以下header呈現這樣，明顯與設計稿不同，請問該如何調整才可以跟設計稿一樣呈現整齊的方格，以下是我的codepen:https://codepen.io/szykttdy/pen/yLbbWOa?editors=1100

>助教回覆:
主要在斷點的設定:
在 @media(max-width:375px) 中需要調整 header 與 menu 的屬性（切版時可以先考慮哪些屬性是碰到斷點會改變的）
>例如：
可將 header 的 padding 與 justify-content: space-between 移除，補上text-align: center;
.menu 寬度可以設定100% ，內元件的 li 設定 width: 50%; border 替換成 outline（因為 outline 不會佔用 px ）