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

# 7/30 線上 Slack 助教

## 今日助教輪班時間

JasonLu：7/30 (五)
回覆時間：下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. zyc：
Jason助教您好 : 這是我的 [Github-repo](https://github.com/zyan-c/glasses/tree/master/app) 和 [Github-pages](https://zyan-c.github.io/glasses/) 連結。
有三個問題想請教～
index.html / _index.scss
1）首頁 hero 區塊的背景圖片有沒有不寫死高度，同時又保持 100vh 的辦法？嘗試 min-height: 100vh; 和 height: 100vh; 都無效。想要嘗試 height:calc(100vh-nav的高度)，但是nav沒有寫死高度。請問怎麼解決？
（目前根據設計稿寫死高度，但是往下滑還是有圖片。想要下滑就出現下個區塊的內容）
2）如圖，設定 img border-radius: 4px 4px 0 0; 出現未預期的效果，感覺卡片的 border 是覆蓋在 img 的 border-radius 上。請問該怎麼設定？

location.html / _location.scss
3）如何讓 ul 的內容居中，且第二行 li 靠左？
先說目前出現在 gh-page 上的結果，是在第1，2，4個 li（第20，32，56行code）下 margin-right:30px 的 class 來推擠 li 之間的距離。但是這樣導致 ul 內的內容不是完全置中的。
然後參考此 codepen，理想的方式是不用 margin 推擠特定卡片，用 justify-content:space-between 來自動產生 margin，但這樣會導致第二行的卡片自動向左右靠齊。
有什麼辦法可以在不設定特定 li margin 的情況下，讓第二行的 li 可以自動靠左嗎？
*因為考慮到如果在特定的 li 加入 margin ，卡片數量增加的話可能會導致版面樣式不一（又要重改code）。
謝謝～
> 助教回覆:
1. 可以把 .card 設定的 border 移至 .card-body。不過在修改之前 card-date 對齊需要換個方法，建議把 position 移除，改成在 .card、card-body 設定 display:flex、flex-direction:column，並且在 .card-body 加上 flex-grow:1;、justify-content:space-between; 助教這邊提供[範例](https://codepen.io/hexschool/pen/PomJOVN?editors=0100)給同學參考

1. 因為沒有足夠的文字內容可以把高度撐到 958px，所以 .hero 區塊還是要寫死高度。如果想要讓 .hero 區塊高度為 100vh，並且下滑就出現下個區塊的內容，可以對 .topNav 加上 position: absolute;，藉由絕對定位使 nav 脫離原本的位置，讓後面的 .hero 補上空缺

.topNav{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

3. 不使用 margin 的話，可以參考 bootstrap 格線系統，使用 gutter 的概念處理，助教這邊提供[範例](https://codepen.io/TzuHui/pen/zYwjoNL)給同學參考

---

2.Karen Huang
大家好，這是我的[git repo ](https://github.com/CodingSnorlax/opticalshop)跟[github page](https://codingsnorlax.github.io/opticalshop/)
我原本預期在「經典系列鏡框」那個區塊的照片寬度應該是635px，可是不知為何怎樣調，他的大小都是705px，很想知道該如何將圖片縮到我想要的尺寸，因為我目前已經把img裝在div內，又把div設定為635px，img 的width:100%了～～可是還是無解....謝謝助教
> 助教回覆: 在.classicSeriesPic 設定寬度，圖片尺寸就會縮小為635px 了
> `.classicSeriesPic {
width: 635px;
}`


---

3.ZengZeng
Jason助教你好，這是我的codepen，我在footer的地方有兩個疑問～
(一)當我縮放到pad的尺寸時，原本預期：
1. fb/ig/line的icon 間距會縮成10px
1. 電話/email的icon 會縮小成20px
1. 隱私權政策/服務條款 間距會縮成24px

但以上3件事都沒發生~不知道出了什麼問題><

(二)當我在設定手機尺寸的css時，我要將footer的menu(首頁/系列鏡框/…等)隱藏時，我直接在.menu-nav下display: none; 不知道為什麼沒效果，但如果在 .menu-nav li 下display: none; 就可以！
想知道為什麼會這樣><
再麻煩助教解惑～感謝:pray:

> 助教回覆:
(一) 因為在 Pad 尺寸選擇器的權重比 PC 小，所以無法覆蓋 PC 的設定(口訣: 先看權重在看順序)。 Pad 尺寸選擇器的權重必須要相同或是更高才能覆蓋掉 PC尺寸 的設定。
> 1. **Pad** .menu-social li 權重比 **PC** .footer .menu .menu-social li 小。( 11分 vs 31分 )
> 2. **Pad** .contact .contact-img 權重比 **pc** .footer .contact li img 小。( 20分 vs 22分 )
> 3. **Pad** .terms a 權重比 **PC** .footer .other .terms a。( 11 分 vs 31分 )

> (二) 因為 .menu-nav 的權重比 .footer .menu .menu-nav 小，所以無法覆蓋 PC版 設定的 display:flex，如果是這樣寫的話就可以覆蓋:

@media (max-width: 375px){
  .footer .menu .menu-nav {
    display: none;
  }
}

---

4.lumei
助教您好，這是我的[codePen](https://codepen.io/l_umei/pen/yLbjazO)，有些疑問想詢問下：
資訊欄中的icon雖然大小有設定width:24px ，但地址的icon大小會不統一，是因為設定display:flex 造成推擠的關係嗎？有什麼方式能讓大小統一嗎？
再麻煩助教解惑 謝謝！

> 助教回覆: 因為 img、p 段落超過父層寬度，所以會依照比例去縮減子元素的寬度，如果希望圖片寬度不被縮小，可以在圖片設定 flex-shrink: 0; 助教這邊提供參考[文章](https://tzuhui.github.io/2020/05/30/w3HexSchool-challenge/flex-shrink-rule/)

.address-icon {
    ...
    flex-shrink: 0; //預設值為 1 
}

---
5.沈依蓉
Jason助教你好，這是我的[git repo](https://github.com/lily-oa/Lession3-glassesStore/tree/master/app) 及 [git page](https://lily-oa.github.io/Lession3-glassesStore/)
有問題的頁面: siteData.tml 、style>pages資料夾裡的_siteData.scss
當我在做app>siteData.html頁面時，因pad版(992)時 <!--siteData-->這一個區塊的siteData_title區塊 及siteData_card_list 區塊是用position : absolute; 去推(在siteData_all區塊下position:relative)，但是在手機版時(mobile:)，發現siteData_title區767塊、siteData_title_list區塊、siteData_map會全部重疊在一起，且沒有各區塊應該要有的各自空間，請問在手機版時該如何改才對？

> 助教回覆:在 pad、phone 版不建議使用 position 排版，這樣子的做法在修改的時候常常會牽一髮動全身，造成每個使用 position 的地方都要調整偏移值。因此助教會建議同學使用 flex排版，這樣才不用一直覆蓋、調整偏移值。