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

# 7/29 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. 童筱涵 ：
助教你好，我這邊想請問終端顯示錯誤的問題，我在撰寫的過程中一直跑出這個錯誤，但是網頁顯示正常，上傳到git也正常，為什麼會一直顯示為定義這個變數呢？我有試著把第二行拿掉，就會顯示下一行的mixin沒有 text-hide這個名稱，如果畫面都顯示正常的話我要理他嗎:smiling_face_with_tear:
git repo https://github.com/judytung/test2
> 助教回覆： 看起來是 layout.scss 沒有加上下底線的原因，麻煩改成 layout.scss 後在試試看
---
2. ZOE WU :
Hello @耕緯 助教～關於眼鏡形象頁 header + footer
https://codepen.io/Zoechiueh/pen/KKmowjv?editors=1100
想請問：
1.header 縮成 mobile 規格 (螢幕解析約 767~470px 時)，.nav-link 的白色 border 好像一直怪怪的沒有辦法滿版，希望助教可以再幫我看看是否可以調整得更好～
2.footer 縮成 mobile 規格 (螢幕解析約小於 367px 時)，.icon-mail 很容易就和 [e-mail] 斷開，想請問這個有辦法調整嗎？
如果有其他建議也希望助教可以提供我參考～謝謝助教！
By ZOE WU
> 助教回覆：
1.這邊在切換成手機板時 .navbar 加上 width: 100%;，讓 ul 的寬度跟 header-container 一樣大
2.因為右邊的 social-media 把空間占住了，所以你左邊文字可以使用的空間不夠才會換行，可以對 social-media li a 的 margin-left: 24px; 進行修改讓最左邊的 fb-icon 不要壓迫到左邊的空間。
因為 375px 以下的沒有設計稿，文字大小方面也可修改成 14px，footer-left-bottom contact 的 .icon-mail margin-right 的值在手機板時也有變更
---

3. Sec
助教好，有几个问题想问
关于 用专业的心 ( 截图的部分 )，这部分在 tablet 的 margin-right 是105px, 宽度是255px, 是否要写死宽度? 因为有使用 flex-wrap: wrap 的关系，用 % 是否会比较好, 但是用 % 也不懂要下多少 %, 目前我暂时放 flex-basis: 45%, column-gap: 10%
在 footer 的 copyright 在 tablet 的设计稿版没有和 隐私和服务条规水平对齐是否是设计稿的误差? 目前暂时把 copyright 和 隐私和付款条规水平对齐着
在首页的 經典系列鏡框 的部分, 在 tablet 版型 有出现第一个和第二个 icon 宽高 36.67px, 第3个 icon 宽高为 40px, 请问是否要统一成宽高为40px 还是根据设计稿的 第一第二 36.67px, 第3着是 40px
> 助教回覆：
1.這邊會使用 50%，這邊可以回顧 7/21 的每日任務 RWD 版型
2.可以利用 align-self: flex-end 跟 footer 的 padding-bottoom 讓隱私權政策貼在最下面
3.大小不太一樣建議就照設計稿的寬高下去設定

---

4. 陳品宏
想要請問星星的icon在哪裡~找不到檔案
> 助教回覆：可以參考[這個](https://fonts.google.com/icons?icon.query=Auto+awesome)

<link href="https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined%7CMaterial+Icons+Two+Tone%7CMaterial+Icons+Round%7CMaterial+Icons+Sharp" rel="stylesheet">

這個給你[參考](https://hackmd.io/@HexSlicing2021-Team13/materialIcon-outlined)

---
5. ZY Hsu
老師助教同學們好，這是我的 Codepen
我原本預期.articleTags裡面的a連結文字 (tags)中，會被包在.articleTags裡面，new-Item 和interview能在同一排，但因為文字太長斷行了，不太了解要怎麼調整，再請助教幫忙! 謝謝!
> 助教回覆：這邊可以直接拿除 #interview 的 margin-right 值，.TagsSidebar 寬度修改為 24%