ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
跟大家分享字數不一樣時，讓 hover 的背景顏色可以延伸的方法.item 加上 display: flex; flex-direction: column;.item .txt 加上 height: 100%;
10:00
想請問3:10同時編輯三個div是怎麼做到的?
ctrl+d
好險有老師用心的影片，非常感謝
感謝支持
8:25 請問爲何這裏還要align items ，底下有margin:auto不是就可以置中了嗎？
wrap沒有高度時，會跟父層等高，所以margin應該是無法垂直置中的喔
請教老師/前輩影片17:05中，文字行數的部分除了刪除或加文字讓文字都一樣多的情況下，還有什麼方法能夠 hover 觸碰到時 不留下方那個空白 先謝謝幫助 感謝
原本寫在.item:hover .txt的background-image: linear-gradient() 把這行CSS寫在.item:hover{} 裡
@@lucybaby0102 感謝妳
@@lucybaby0102 感謝答覆，background-image: linear-gradient() 加在.item:hover{} 顏色的確有變，但沒有漸層效果，不曉得原因是甚麼，再請協助，謝謝。
@@samwnkyat1 應該是因為background-image套在item上，所以要調整兩顏色的分布比率，linear-gradient裡加上百分比應該就能看見想要的畫面 例如: linear-gradient(0deg,#FB8076,#FEB85D 40%)
謝謝 coke 老師 從你的影片 真的學習到課本以外的css 應用突然又愛上了好想趕快成為前端工程師
老高!!你好好做youtuber嘛!!
成爲了嗎？
請問老師 為什麼在8:34 hmtl,body設定高度100%，.wrap才會居中在整個版面 ? 我一直以為只要在body設定display: flex justify-content : center align-items:center 就會居中... 結果根本沒有
老師 這段再請有空 撥冗回覆 謝謝 ~
因為HTML的高度沒有跟視窗一樣高你的BODY設定高100％的話，就等於是百分百父層的高度，父層HTML高度是0的話，BODY就等於是0所以要先設定HTML的高度為100%，讓他跟視窗一樣高，BODY則讓他跟HTML一樣高。
visual studio 可以支援fake img嗎
你是說 visual studio 還是 visual studio code ?visual studio code 的話可用關鍵字「fakeimg」搜尋他的擴充套件visual studio 的話可用自己建立程式法的方式來製作，可見 docs.microsoft.com/zh-tw/visualstudio/ide/walkthrough-creating-a-code-snippet?view=vs-2019 了解程式碼片段的製作方式
想請問老師，假圖產生器如何像老師設定成picsum的? 因為我找sublime都找不到這個套件 只找到fakeimg那種有尺寸的
要自己製作
可樂老師你好，我想請教關於13:40那邊，transform:translateY(-100%)是甚麼意思? 謝謝指教
物件向上移動一個自己的高度
@@CSScoke 那如果用相對定位是不是有同樣效果? 那這兩者之間差別是什麼?
Bruce Yang 你可以試試看喔^_^
@@CSScoke 老師請問您一個額外的提問，假設我今天要在h2的border-bottom做transition，當hover到item時，border-bottom，會從中間往兩邊延展開。目前我只做到顯示，但沒有動畫效果，請問老師該如何設定我動畫?codepen.io/bruceeeyang/pen/dybEavN
@@bruceyang8291 你可以參考一下這個影片的做法 th-cam.com/video/IocyLERRdko/w-d-xo.html
為什麼.item .txt:before寬高要設為0呢🤔
老師你好 18:30 您說放在item裡 但這樣 .text:before{ border-left: 184px solid#feb85d; border-right: 184px solid#feb85d; }會跟item的漸層顏色分離 這是為甚麼?但放在 .item .text 卻不會
所在層級問題，先看看這篇了解一下 ::before 的用法吧ithelp.ithome.com.tw/articles/10222534
@@CSScoke 老師最後我是將text設定高度解決行數不同產生的縫隙問題，但還是很好奇要怎麼寫在item裡...
Amos老師好~三角形部分 若是上方圖片css 設定 clip-path: polygon 成五角形.item img{ width: 100%; clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%);}.item:hover .text:before{ position: absolute; content: ""; border-top: 50px solid rgba($color: #000000, $alpha: 0.0) ; border-right: 184px solid #FEB85D; border-left: 184px solid #FEB85D; top:0; left:0; width: 0; height:0; transform: translateY(-50px);}border-top 如果顏色設定透明就會整個不見...不知道為什麼~再請老師指教也有嘗試用父層item:hover 直接覆蓋，好像也簡明item:hover{background: linear-gradient(to bottom,yellow 50%,#FEB85D 100%);}
想請問一下老師 在“13:10"那邊vertical-align middle為何可以處理圖片間隔的問題？還是因為置中了，所以間隔不見了
因為圖片垂直對齊的位置不是基線，所以沒有基線與抵線之間空間存在的問題，這....不好說XD
請問老師 用border寬度寫的三角形 如果要用在RWD的頁面要怎麼寫呢？ 寬度184 隨著網頁大小遞減嗎？
邊框無法使用百分比這個單位，所以可以用ＶＷ來試試看，但有缺點就是了，遇到超寬螢幕會死很慘
老師~網頁學習路徑懶人包裡的第三步FLEX內容裡這篇的影片連結有誤喔，連到互動圖文卡片那部影片囉
想問一下，老師提到的直播的偽類是哪一部? 因為本身對偽類比較不熟悉 想回去補一下偽類的概念
amin 今天剛好寫一篇新的文，可以來這邊補一下ithelp.ithome.com.tw/m/articles/10222534
五體投地呀老師............................
跟大家分享字數不一樣時，讓 hover 的背景顏色可以延伸的方法
.item 加上
display: flex;
flex-direction: column;
.item .txt 加上
height: 100%;
10:00
想請問3:10同時編輯三個div是怎麼做到的?
ctrl+d
好險有老師用心的影片，非常感謝
感謝支持
8:25 請問爲何這裏還要align items ，底下有margin:auto不是就可以置中了嗎？
wrap沒有高度時，會跟父層等高，所以margin應該是無法垂直置中的喔
請教老師/前輩
影片17:05中，文字行數的部分除了刪除或加文字讓文字都一樣多的情況下，還有什麼方法能夠 hover 觸碰到時 不留下方那個空白
先謝謝幫助 感謝
原本寫在.item:hover .txt的background-image: linear-gradient()
把這行CSS寫在.item:hover{} 裡
@@lucybaby0102 感謝妳
@@lucybaby0102 感謝答覆，background-image: linear-gradient() 加在.item:hover{} 顏色的確有變，但沒有漸層效果，不曉得原因是甚麼，再請協助，謝謝。
@@samwnkyat1 應該是因為background-image套在item上，所以要調整兩顏色的分布比率，linear-gradient裡加上百分比應該就能看見想要的畫面 例如: linear-gradient(0deg,#FB8076,#FEB85D 40%)
謝謝 coke 老師 從你的影片 真的學習到課本以外的css 應用
突然又愛上了
好想趕快成為前端工程師
老高!!你好好做youtuber嘛!!
成爲了嗎？
請問老師 為什麼在8:34 hmtl,body設定高度100%，.wrap才會居中在整個版面 ? 我一直以為只要在body設定display: flex justify-content : center
align-items:center 就會居中... 結果根本沒有
老師 這段再請有空 撥冗回覆 謝謝 ~
因為HTML的高度沒有跟視窗一樣高
你的BODY設定高100％的話，就等於是百分百父層的高度，父層HTML高度是0的話，BODY就等於是0
所以要先設定HTML的高度為100%，讓他跟視窗一樣高，BODY則讓他跟HTML一樣高。
visual studio 可以支援fake img嗎
你是說 visual studio 還是 visual studio code ?
visual studio code 的話可用關鍵字「fakeimg」搜尋他的擴充套件
visual studio 的話可用自己建立程式法的方式來製作，可見 docs.microsoft.com/zh-tw/visualstudio/ide/walkthrough-creating-a-code-snippet?view=vs-2019 了解程式碼片段的製作方式
想請問老師，假圖產生器如何像老師設定成picsum的? 因為我找sublime都找不到這個套件 只找到fakeimg那種有尺寸的
要自己製作
可樂老師你好，我想請教關於13:40那邊，transform:translateY(-100%)是甚麼意思? 謝謝指教
物件向上移動一個自己的高度
@@CSScoke 那如果用相對定位是不是有同樣效果? 那這兩者之間差別是什麼?
Bruce Yang 你可以試試看喔^_^
@@CSScoke 老師請問您一個額外的提問，假設我今天要在h2的border-bottom做transition，當hover到item時，border-bottom，會從中間往兩邊延展開。
目前我只做到顯示，但沒有動畫效果，請問老師該如何設定我動畫?
codepen.io/bruceeeyang/pen/dybEavN
@@bruceyang8291 你可以參考一下這個影片的做法 th-cam.com/video/IocyLERRdko/w-d-xo.html
為什麼.item .txt:before寬高要設為0呢🤔
老師你好 18:30 您說放在item裡 但這樣 .text:before{
border-left: 184px solid#feb85d;
border-right: 184px solid#feb85d;
}會跟item的漸層顏色分離 這是為甚麼?
但放在 .item .text 卻不會
所在層級問題，先看看這篇了解一下 ::before 的用法吧
ithelp.ithome.com.tw/articles/10222534
@@CSScoke 老師最後我是將text設定高度解決行數不同產生的縫隙問題，但還是很好奇要怎麼寫在item裡...
Amos老師好~三角形部分 若是上方圖片css 設定 clip-path: polygon 成五角形
.item img{
width: 100%;
clip-path: polygon(0% 0%,100% 0%,100% 80%,50% 100%,0% 80%);
}
.item:hover .text:before{
position: absolute;
content: "";
border-top: 50px solid rgba($color: #000000, $alpha: 0.0) ;
border-right: 184px solid #FEB85D;
border-left: 184px solid #FEB85D;
top:0;
left:0;
width: 0;
height:0;
transform: translateY(-50px);
}
border-top 如果顏色設定透明就會整個不見...不知道為什麼~再請老師指教
也有嘗試用父層item:hover 直接覆蓋，好像也簡明
item:hover{
background: linear-gradient(to bottom,yellow 50%,#FEB85D 100%);
}
想請問一下老師 在“13:10"那邊
vertical-align middle
為何可以處理圖片間隔的問題？
還是因為置中了，所以間隔不見了
因為圖片垂直對齊的位置不是基線，所以沒有基線與抵線之間空間存在的問題，這....不好說XD
請問老師 用border寬度寫的三角形 如果要用在RWD的頁面
要怎麼寫呢？ 寬度184 隨著網頁大小遞減嗎？
邊框無法使用百分比這個單位，所以可以用ＶＷ來試試看，但有缺點就是了，遇到超寬螢幕會死很慘
老師~網頁學習路徑懶人包裡的第三步FLEX內容裡這篇的影片連結有誤喔，連到互動圖文卡片那部影片囉
想問一下，老師提到的直播的偽類是哪一部? 因為本身對偽類比較不熟悉 想回去補一下偽類的概念
amin 今天剛好寫一篇新的文，可以來這邊補一下
ithelp.ithome.com.tw/m/articles/10222534
五體投地呀老師............................