8/17 線上 Slack 助教

--- tags: 網頁切版直播班 - 2021 夏季班 --- # 8/17 線上 Slack 助教 ## 今日助教輪班時間焦糖：8/17 (二) 回覆時間：下午 2:00 -下午 6:00 ## 發問規範老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？ ## 注意 1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖 ![](https://i.imgur.com/nHE3sOx.png) 2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖 3. 助教會依照 Slack 上的順序回覆問題 4. 以下問題區塊只能由助教自行增加 5. 助教會將回覆寫在下方問題區塊 ## 問題 1. 沈依蓉：助教您好: 要怎麼做它左邊的hover藍色線才會不跳動？ Codepen: https://codepen.io/lily-oa/pen/VwbNGpX?editors=1100 我想做出像同學作品左邊區塊的hover滑動效果但我的會一直跳同學作品: https://aer456987.github.io/admin_week5/# > 助教回覆：助教有使用你的 CodePen 下去修改，可以[參考我的作法](https://codepen.io/yen-kg/pen/abWrVzM?editors=1100)。 --- 2. Karen Huang：助教你好，這是我的 repo 和 page: 我的第一個問題是，在視窗768~992px之間，我的熱門展覽的圖片會跑版，是否是因為我在img上設定 ratio 1x1 的關係？那我應該如何解決這個破圖問題，又可維持圖片在各視窗使寸下的正常顯示呢？第二個問題是：我的子導覽列，即html 27-41 行的部分，在手機版上，音樂、戲劇這兩項竟然不會顯示...然後實際用手機(iphone 7plus)測試也怪怪的，我的寫法是套用8/10的每日任務，但結構略有不同，我用 ul li 來包nav，不曉得是否是這個原因(?) 第三個問題是，我的主視覺按鈕(html 16-18行) 在手機版目前是w-50，有看助教影片說明，要做ｍｄ尺寸的時候要另外寫mixin，但我因是用bs-5 fix版本，沒辦法用mixin，想請教助教有沒有其他辦法也能不透過mixin 寫出平板以上的button 正常尺寸(?) 以上三個問題，謝謝助教 > 助教回覆： > 1.首先這裡你先在 body 內對 img 標籤下 { max-width: 100%; height: auto } 做全域設定，接著把 .ratio 的相關設定都移除掉，然後對 img 標籤與外層 div 下 height: 100%，如[圖片](https://imgur.com/a/d5sUqvw)。最後圖片的高度就會填滿區塊囉！[如圖](https://imgur.com/a/YwRFMnn)，你在試試看。 > > 2.這個在 .subNavList 把 justify-content-center 修改成 --> justify-content-md-center 就可以解決囉！ > > 3.若不使用 @mixin 的話，會建議把按鈕上面的 .w-50 拿掉，然後利用 padding 推擠出按鈕的寬高，再針對斷點去修改就好。 --- 3. 周周：助教您好~因問題比較多，我有把問題放在HackMD裡，再麻煩助教協助確認，感謝助教。 > 助教回覆： > > 1.有看到你設定 .w-50，它也有正確吃到這個屬性。只是這二個按鈕設定 width: 50% 是沒有辦法並排的喔！因為這二個按鈕之間有一點距離，因此不能設剛剛好 50%，你可以調整 49% 留一點空間就可以並排了。 > > 2.這裡有看到你設定 .d-md-none，這一段的 CSS 是這樣的： > @media (min-width: 768px) { .d-md-none: display:none } 也就是說它的解析度要大於 768px 才會觸發，所以自然手機不會隱藏哩！若要隱藏可以先下 .d-none，等到想要某個解析度要顯示時再使用 .d-*-block 就好了。 > > 3.已解決 > > 4.原因是 .d-none 是 { display: none !important } 的意思喔，所以你要加上 .d-md-block 電腦版才會顯示。 > > 5.我在這裡有看到你使用 Swiper 來製作，這樣是不對的喔！這裡只會利用到 overflow-x: auto; 來產生橫向的 x 軸，不會使用 Swiper 套件，可以[參考範例](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-x)。 > > 6.這裡不太確定你指的首頁沒有置中是哪裡呢 ? 因為你有下 .container 整個版型是置中沒有問題的，[如圖](https://imgur.com/a/yjwrONL)。在麻煩你說詳細一點唷 >< --- 4. Kent：焦糖大您好，想請問關於第五週切版，問題我放在 notion 裡頭附上照片以及對應的程式碼連結，再勞煩您解答了 https://kentclark.notion.site/e8fdd65afc244b4799b6eb396f808ee6 作業連結 repo、page > **Admin：** > 1.這個可以參考 Bootstrap Modal 的 Toggle between modals 來進行切換喔！ > > 2.符號的話，那是因為一開始 class 沒有加上 collapsed，補上去就可以囉！ > > 3.這個可以[參考這個網站](https://botmonster.com/jquery-bootpag/#.YRtq_IgzaUk)的方式唷。 > **Assignment：** > 1.這個可以使用 jQuery 的 slideDown()，[參考範例](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slideup_slidedown)。 > > 2.會有間距是因為字體的 line-height 所產生的，對著文字的外層 div 下 line-height: 0px 就會發現沒有距離哩，如[圖片](https://imgur.com/a/9rzf8pW)。 **BS 元件覆蓋：** >1.這樣子寫是沒有問題的，但如果你想要把它們都拆開來分別各寫一個 .scss 也是可以。( 是我的話會想要拆開，這樣之後維護會比較能夠快速的知道改了什麼 ) > >2.若要覆蓋樣式的話，會建議加上註解喔！例如這一段覆蓋是覆蓋在哪裡的內容，會建議用備註的方式來提醒，不然很多頁面常常覆蓋到最後會很亂。另外你這樣寫是沒有問題的，最主要還是要蓋的過去才是重點 XD > >3.若其他頁面也會使用到的話，可以拉出來 ~ --- 5. Elaine Liu：助教好，這是我的 repo 和 pages，我只有設按鈕的寬度，沒有設定區塊或容器的寬度，但不知為何，在響應式時會出現 x 軸（如下兩張圖），不知問題出在哪？是 HTML 結構有問題嗎？補充：剛做了一些測試，應該是因為 BS 是從手機寫起的關係（我目前用的 calss 也沒有寫任何斷點），所以當我從大螢幕拉到小螢幕才會產生 x 軸，不曉得我的理解有沒有錯？還請助教解惑，感謝。 (已編輯) > 助教回覆：會有 x 軸的問題是因為你加上了 .offset-md-1，因此在 768px 以上時會產生 margin-left，這裡移除掉就好了，可以利用 .col 來製作。另外提醒一個比較重要的地方，就是在 .row 之後一定要接著使用 .col-* 才對喔！ --- 6. zyc：焦糖助教您好，想針對8/11和8/12的每日任務來確認一下基本的CSS觀念是否有誤>< 8/11 每日任務（偽元素）問題1）transform: translate(-50%,-25%); 其中 y 軸的 25%怎麼來的？（我是先用肉眼判斷 x 或 y 軸是否偏移，然後才來設定是對的嗎？還是有更系統一點的方法？）我的理解是，當設定 absolute 並調整 top/right/left/bottom 的時候需要用 transform:translate(x,y) 來矯正 top/right/left/bottom 的位置。例如，top/bottom 的值若是正值或負值，在 translate x 就要加入相對的正負值。像是如果設定 top:50%; 則必須 translate(-50%,0);、top:-50%; 則必須 translate(50%,0); 這個概念對嗎？問題2）為什麼要設定 left：50%？我嘗試在 codepen 移除 left:50%; 然後加入 transform: translate(0,-25%); 也有一樣的效果。這樣也可以對嗎？附上 codepen連結問題3）請問焦糖助教自己在設定 absolute 的時候也會先用肉眼判斷是否要更改 top/right/left/bottom 的值嗎XD？ 8/12 每日任務（fixed modal）問題1）為什麼要設定transform: translate3d(0%, 0, 0);？從 devtool 刪除這個屬性似乎沒有變化。問題2）.modal.right 這樣宣告是什麼意思？為什麼.modal-dialog 前面要有空格？就我的理解，先使用組合式宣告 .modal.right(.modal和.right之間無空格)+層疊式宣告 .modal-dialog（.modal-dialog前面有空格），是因為「當開啟 .modal-dialog 的區塊，又偵測到父層 .modal.right 的話，才會啟動.modal.right .modal-dialog{..} 裡面的樣式」？所以如果有另一個同樣的modal區塊，但是沒有 .right 這個 class 的話，就不會啟動 pos:fixed, top:0, right:0..略這個樣式設定對吧？問題3）那為什麼 css 內不直接寫成組合式 .modal.right.modal-dialog{}？謝謝助教～ > **8/11 每日任務：** > 1.對的沒有錯喔，transform:translate(x,y) 簡單來說就是用來矯正位置用的，讓其元素的位置可以更正確。 > > 2.這裡不建議使用 transform: translate(0,-25%); 來取代原本的 left: 50%，雖然產生的效果都一樣。原因是 transform: translate 最主要還是拿來做動畫用的，且一些早期的瀏覽器並無支援此語法，position: absolute; 則沒有這個問題，可以[參考連結](https://stackoverflow.com/questions/41335370/position-relative-vs-transform-translate)。 > > 3.會先用肉眼判斷，然後再慢慢調整到對的位置。 > **8/12 每日任務：** > 1.其實是有變化的喔，它蓋掉Modal 出現時的位移動畫設定。 > > 2.簡單來說 .modal.right .modal-dialog 這一段意思是 --> 選取.modal.right 裡面的 .modal-dialog。如果寫成 .modal.right.modal-dialog 的話就會變成選取到最外層的 .modal-dialo 所以是不對的喔！ --- 7. Alicia Lo：焦糖助教您好: 這是我的Github repo和 Github page。以下有兩個問題想請問助教: 1.昨天有詢問關於 BS 文字斷點的問題，有依照昨天當日助教建議將預設的 rfs: true, 刪去，確認編譯狀況後，發現文字斷點並沒有正確的編譯出來，但是編譯器沒有任何報錯訊息，修改其他SCSS檔也可以成功編譯，但文字斷點加上 responsive: true 卻沒辦法成功編譯。不確定是哪裡出了問題:含淚大笑的臉: 2.(a)有關於 index.html 的第24~54行，我希望 hover 到 .nav-link 時可以讓底線(border-bottom) 不要那麼快出現(類似淡入淡出效果)，因此下了 transition漸變語法，但發現用all 的話，會連同顏色也做漸變效果，但改成指定只有border-bottom(_index.scss第22行)，顏色依然會有漸變效果。(b)另外也有發現，hover 出現 border-bottom，會因為新增的 border高度而推擠到外層nav的高度，導致畫面看起來像在抽動。原本想改成不會占據空間的outline，但 outline似乎沒辦法設定只有單邊。想詢問助教，關於這兩個問題會建議如何處理呢? 再麻煩助教了，謝謝助教~! > 助教回覆： > >1：待釐清 ... > >2：你的 border-color 不要使用變數就可以囉，因為 $secondary 似乎有改到會變成 #E31277 這個粉紅的顏色 XD。另外一個問題可以在 .nav-link 加上 border-bottom: 1px solid transparent;(透明) 就可以解決抖動問題了 --- 8. Karen Huang Dear 助教好，這是我的 repo 和 page：剛剛已經有收到稍早的回覆，然後我的三個問題有依序去調整了，但我仍有疑問。第一個問題是，根據你剛剛回覆給我的作法，我在把ratio拿掉後，因為圖片就不會是1x1，也就不會是像設計稿一樣的正方形顯示方式了，所以不管我在任何尺寸底下，都會是這種樣子...也就是跟設計稿不一樣，我很困惑，應該要怎樣才能讓我的圖片在各種尺寸底下都是 1x1 但又不會破版？或不會跟設計稿一樣是正常的？第二個問題是：關於子導覽列的問題，根據你剛剛回覆給我的作法，我有把justify-content-between 拿掉，可是變成在平板以上的尺寸，我的子導覽列就不會在銀幕正中央，會齊左了...我有試圖在subNavList這邊下margin: 0 auto; 好像也無法使子導覽列置中！第三個問題是：我已有在 base 下 padding: 0, margin: 0，希望用全域的方式讓所有容器內部都可以還原為預設狀態，但我發現我的card(因為是抓BS5的component來用)，裡面還是有一些不明來源的padding, margin 空隙，看dev tool 發現是bs5預設內建的。我的問題3-1是，為什麼我在base這樣寫，仍然會被BS5變數覆蓋？問題3-2是，如果是助教你自己本身的話，會怎麼處理這些系統預設的空隙問題？感覺好像不能不管它？因為這樣寫起來總感覺會與設計稿上有誤差！（一直很堅持要跟設計稿一樣但一直做不到很懊惱的人）:快樂: 第四個問題是：我有在innerExhibitionDate(html 第77行)，下fs-lg-1，希望在桌機版的時候，字體大小可以變大，但卻沒有反應，不知道原因出在哪！以上問題還是好多 >< 謝謝助教解惑！ > 助教回覆： > > 1.若要讓圖片都是維持正方型，只能寫死寬高 { width: 350px; height: 350px }，但這樣做因為外層有下 .col-md-8 的關係，所以一定會造成破版。除非要針對 .col-md-8 來做修改寬度，因此這裡先不需要跟設計稿一樣唷 (我目前也沒有看到任何作業做到寬高二個都剛好 350px XD )。 > > 2.可以把 justify-content-md-center 可以修改成 --> justify-content-md-center。 > > 3.在 _base.scss 有看到你對 body 下 { margin: 0px 與 padding: 0px }，但其實 Bootstrap 其實本來就有對 body 下 margin: 0px 了，這邊你是指想要清除所有標籤預設的距離嗎 ? 如果是的話可以利用 [reset.css](https://meyerweb.com/eric/tools/css/reset/) 來清除唷。 > > 這裡會直接加上 reset.css 來清除瀏覽器的預設就好了。 > >4.Bootstrap 沒有 .fs-lg-1 這個 class 喔 ( 除非是自己新增的 )。只有 .fs-1 而已 ~ > --- 9. ChuanMing：老師及助教大大好，我想請教一下Gulp的問題，我是win系統 npm install 是每一次我要執行新專案的時候都要重新執行安裝過嗎? 就假設我第二週任務已經執行完了，要執行第三週，那我一樣是再抓一次資料夾下來 > cd 資料夾路徑 npm install > 然後執行Gulp > 接著就是跑一次原始碼跟網頁的佈署流程 > > 助教回覆：每一次執行新的專案都要 npm install 沒有錯喔，也要重複所有的步驟。第二週若執行過一次，第三週也要再執行一次。 --- 10. 軒仔：助教好，我想問每日任務，不知道為什麼我使用right和bottom屬性無法讓keyframe動起來 codepen: https://codepen.io/loking23/pen/qBmGxXJ > 助教回覆：因為你 @keyframes example 裡面的 top、left 都是 0 沒有設定唷 ~ --- 11. Jiang V：助教您好，我想請問 overlay 這個區塊，我的透明度好像連同文字、人像圖片、按鈕都一起透明了，這裡需要怎麼調整程式碼才不會影響到人像圖片、文字、按鈕呢？這是我的 repo / gh-pages，再麻煩助教解惑，謝謝 > 助教回覆：這裡不會使用到遮罩的效果，因此 .card-img-overlay 與其他相關屬性都先移除。這裡直接對 .open-talk 的 background-color 下 #190014CC 就可以了，[如圖](https://imgur.com/a/db3ooEC)。 --- 12. Sec：助教好，想请问在首页的 footer banner 的 input-group 为什么在手机版的时候会换行, 是不是要改 input-group 的 flex-wrap: none? > 助教回覆：我這邊檢查你的 .input-group 在手機版 375px 下看是沒有換行的欸，如[圖片](https://imgur.com/a/U4KCfZp)。能否利用截圖給我看看呢，或是你指的地方不是這裡。另外如果有換行的話，可以試著下 .flex-nowrap 解決試試看。 --- 13. 童筱涵：助教你好，想請教幾個問題～＊assignment頁面 assignment.html 137行 editor的部分 1.editor的textarea區域高度該怎麼調整讓他有高度 2.reply跟cancel兩個按鈕一直在外面，有參考過其他助教，但改不過來讓他放進去 3.editor的邊框能修改嗎，還是我應該放在li裡面，但放進去我找不到讓他滿版的方法，試過用js添加樣式改padding但行不通＊admin頁面 1.個人資訊 index.html 201行那邊，我想讓照片跟旁邊verified是切齊的，我用開發人員工具看是照片沒有滿版的關係，請問該怎麼調整呢 2.在add new admin的modal裡， index.html 317行，想問說點擊label的話應該會focus在input，我有寫對應的label for跟id，但我這邊點擊是沒有反應的，跟我預期的不太一樣 3.分頁部分的hover，左右箭頭的白色出不來，不知道是否是我寫錯了ＱＱ > 助教回覆： > > **assignment頁面**： > 1.建議直接在 .ck-placeholder 加上 height 就可以囉。 > > 2.這裡我是利用絕對定位的方式，將按鈕放在裡面。首先 .ck-placeholder 我先改成 height: 200px，接著在按鈕的最外層加上 position: absolute; top: 200px (.ck-placeholder 的高度); right: 20px; 最後出來的成果就會像這樣，[如圖](https://imgur.com/a/tCTxXhB)。你再試試看唷 ~ > > 3.想要確認一下 editor 是指哪裡呢? 可否再詳細說明是第幾行 >< 或是截圖告訴我是哪個區塊 > > **admin頁面**： > 1.這裡有二個解決辦法。第一是把圖片的 height: 141px 拿掉。第二是調整右邊區塊的 margin 讓高度跟左邊圖片一樣，例如 emir.wicks@mail.com 這一段文字的 margin-bottom: 16px --> 可以修改為 margin-bottom: 12px。 > > 2.這裡不要使用 addnewName 跟 addnewEmail。原因 id 是唯一值不會有二個，你在 Edit Modal 已經有使用過了，不可以重複使用唷。 > > 3.這裡會建議對箭頭直接寫 hover 時的顏色唷。不要直接使用 .text-success，因為它有下 !important 不管有沒有觸碰到都會是 .text-success 的顏色。