ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
後面那個線好好玩XD
老師，雖然你在片尾的時候說整個內容的置中很簡單...可是用了好多方法跟看老師寫的文章，還是沒辦法把那四張圖放在畫面的中間, 麻煩老師指點該怎麼辦?
自己在後面影片中領悟到解答了.wrap{ height:100vh; width:100%; display:flex; align-items: center; }只要用到align-items 屬性放對地方就可以解決了，覺得我可能基本功還不太夠
影片中細節都要注意，還要思考為什麼這樣寫，會收穫更多喔
請問如何把游標選取的東西一次頭尾div框起來，不用再去打 然後再把東西貼進去
完勝一堆坑人課程
感謝支持^^
一直困擾的父層摸到子層做效果，之前問人以為只有JavaScript能解～殊不知今天在這裡學到兩招用CSS就能做超簡單的啦！！ 謝謝老師
CSS超簡單的啦~ (咦?好像劃錯結論XD)
@@CSScoke 感謝Amos~讚嘆Amos~
老師你好, 可以請問一下7:19 設定top,right,left,bottom 的意義嗎? 同時設4個方向0 是因為要做到在圖片上面垂直+水平置中嗎? 可是後面又加上一個flex做置中 謝謝
14:40 加碼 觸碰的橫線效果
對偽元素有進一步理解，這個頻道太讚了!
快分享給朋友一起來學習阿
老師好，請問為什麼 h2 使用偽元素的底線設定不是用 border 而是直接設定 width 就可以達到此效果呢?
@@奶油雞雞 想請問你，如果想讓文字也一起RWD，不要因為視窗縮小，文字就超出圖片，我該往哪個方向去嘗試呢?
@@he790803 我想到的方向是 *parent* 和 *child* 的寬度設定，牽涉到 *_CSS_* 橫向視覺。親層定義子層的寬度，子層的總寬度永遠會參考親層（這是重點哦），%數的設定也一樣，這點應該沒問題吧:D例如：div { width: 300px; } p { width: auto; }p的寬度爲(請計算p寬度)_//300px;_但，有時候子層爲了永遠符合親層的總寬度，會出現所謂的負值邊界，會是 *_CSS_* 的 *semantic dodge* 右邊超出的情況1:- 這裏面會有一段文字句號這裏面會出現一段文字div{ width: 300px; background-color: red; }p { width: auto; margin-left: 20px; margin-right: -80px; }p的總寬度計算為（20px + (請計算p寬度) - 80px）= 300px //div 寬度答案是：360px，所以 _p_ 段部分文字會溢出，直到符合 360px 再折行右邊超出的情況2:-div{width:300px; background-color: red;}p {width:400px; margin-left: 20px; margin-right: auto;}p的總寬是400px，這裏會有兩個問題。(1)超出了親層寬度導致 過度受限(overconstrained)，成功激活margin-right: auto，讓文字超出親層寬度範圍，(2)直到符合400px再折行。p的總寬度計算為（20px + 400px - 120px(margin-right)）= 300px //div寬度stackoverflow.com/questions/66210839/why-is-right-margin-of-overconstrained-element-not-behaving-as-expected
請問::after跟:after 有什麼差別嗎?
不嚴謹的說，沒差。嚴謹的說有差。但基本上你目前寫哪個都可以就是了。
老師我想請問一個問題，就是最後如果想要置中要怎麼做呢我原本以為在.wrap{}內加上align-content: center:即可但卻沒有
html,body{ height:100% }body{ display: flex; align-items: center; }要先給予高度這樣才有辦法置中喔 有錯的話麻煩請其他大大指導
前兩個禮拜開始從頭把金魚看完，真的收穫很多，如影片開頭說的之前學過但不是很理解。透過老師講解觀念真的有通了的感覺，好期待接下來會有更多的教學！！雖然自己的速度還是很慢，但每天還是會練習一下～～感謝老師
感謝支持，喜歡就分享給身邊更多朋友吧，希望能多點訂閱嚕^^感謝啦
老師，您好想請問一下如果互動圖文裡面的文字需要做到rwd的話，用什麼方式會比較好實現呢?
就手機直接顯示就好囉
可樂老師你好，我想請教一個疑問，在9:45分只寫top=0 ;right=0 ; display :flex ; flex-direction: column; justify-content: center;只是沒加bottom=0 ;就無法垂直置中 是什麼原因呢??
可樂老師你好，我想請教一個很愚蠢的疑問...關於9:20秒~9:50秒的display:flex;justify-content: center;flex-direction: column;為什麼要設定flex? 為什麼要設定flex? 用margin可以嗎?請老師指點
用 margin 不行喔，因為內容文字的數量可能會有多有少，這時候你用 margin 的話無法達到我們想要的垂直居中的效果，如果你想要使用 margin 的話，那麼就會需要多加幾層的 div，這樣可能要講解的東西就變多了，所以這次的金魚為了節省時間，多是採用 flex 也是這原因。想了解垂直置中的技巧的話，可以參考這邊的幾篇文章>>CSS垂直置中技巧，我只會23個，你會幾個csscoke.com/2018/08/21/css-vertical-align/>>連續30天的超實務網頁設計的垂直置中教學ithelp.ithome.com.tw/users/20112550/ironman/2092
我的馬>< 這個好實用哦！！感謝！！
哈哈，其實有好幾個都是實務上面常用到的啦，就看你們遇不遇的到了^^
老师 請問你的“*”就直接打出reset指令是怎樣弄的？
使用自訂的 snippet ，看你用的是哪套編輯器，你可以用「snippet」這個關鍵字去查一下怎麼製作自訂的 snippet（片段） 喔
@@CSScoke 非常感谢！ 找到我需要的影片 目前已经抓到如何自定义自己需要的code
@@CSScoke 也是嗎!?
@@rizer9276 這是編輯器本身就有的功能喔
@@CSScoke 是打style然後按tab嗎?我這樣打出現
請問 8:13 .txt怎麼一起刪掉
先選取一段你要刪掉的文字，接著按一下「Ctrl + D」就能選到其他相符的字串，選完之後按鍵放掉，再按一下 Ｄｅｌｅｔｅ就好了
老師請問一下 *{ padding: 0; margin: 0; list-style: none; }跟金魚版之前rest講的 meyerweb.com/eric/tools/css/reset/index.html 一般來說 用下載下來的rest.css 比較好是嗎?
沒有好壞差別，純粹是看公司團隊用哪種，以及專案需求來決定。
中槍，都市傳說破解啦，原來父層不是一定要用相對定位
嘿嘿嘿，應該有一堆人都中槍吧
老師金魚2好短哈哈 剛看得起勁的時候就沒了QQ不過還是超喜歡老師的教學 真是受益良多
金魚系列都走入門而已，要深入的話的確要講很久，切板會有很多細節可以談，包含RWD更多考量跟心法，那個通常會在上課說，金魚就比較不適合了，太多原理跟理論大家應該會看到睡著XD
現在每天都在期待老師出的影片哈哈老師加油💪
到底後面還會有些甚麼樣的版面呢? 就讓我們繼續看下去~
....好奇怪，我用visual studio code打出來的明明跟老師一樣，卻出不來.....
可惜我平常要上班沒時間看，我集中在假日看好了期待老師的金魚2
都可以重播，放心的上班吧^^
Amos老師的影片總是能用最短的解說最清楚的方式讓我們了解，更破解我聽過的都市傳說XD 真的是受益良多，老師加油!!
感謝支持＾＾
後面那個線好好玩XD
老師，雖然你在片尾的時候說整個內容的置中很簡單...
可是用了好多方法跟看老師寫的文章，還是沒辦法把那四張圖放在畫面的中間, 麻煩老師指點該怎麼辦?
自己在後面影片中領悟到解答了
.wrap{
height:100vh;
width:100%;
display:flex;
align-items: center;
}
只要用到align-items 屬性放對地方就可以解決了，覺得我可能基本功還不太夠
影片中細節都要注意，還要思考為什麼這樣寫，會收穫更多喔
請問如何把游標選取的東西一次頭尾div框起來，不用再去打 然後再把東西貼進去
完勝一堆坑人課程
感謝支持^^
一直困擾的父層摸到子層做效果，之前問人以為只有JavaScript能解～殊不知今天在這裡學到兩招用CSS就能做超簡單的啦！！ 謝謝老師
CSS超簡單的啦~ (咦?好像劃錯結論XD)
@@CSScoke 感謝Amos~讚嘆Amos~
老師你好, 可以請問一下7:19 設定top,right,left,bottom 的意義嗎? 同時設4個方向0 是因為要做到在圖片上面垂直+水平置中嗎? 可是後面又加上一個flex做置中 謝謝
14:40 加碼 觸碰的橫線效果
對偽元素有進一步理解，這個頻道太讚了!
快分享給朋友一起來學習阿
老師好，
請問為什麼 h2 使用偽元素的底線設定不是用 border 而是直接設定 width 就可以達到此效果呢?
@@奶油雞雞 想請問你，如果想讓文字也一起RWD，不要因為視窗縮小，文字就超出圖片，我該往哪個方向去嘗試呢?
@@he790803 我想到的方向是 *parent* 和 *child* 的寬度設定，牽涉到 *_CSS_* 橫向視覺。
親層定義子層的寬度，子層的總寬度永遠會參考親層（這是重點哦），%數的設定也一樣，這點應該沒問題吧:D
例如：
div { width: 300px; }
p { width: auto; }
p的寬度爲(請計算p寬度)_//300px;_
但，有時候子層爲了永遠符合親層的總寬度，會出現所謂的負值邊界，會是 *_CSS_* 的 *semantic dodge*
右邊超出的情況1:-
這裏面會有一段文字句號這裏面會出現一段文字
div{ width: 300px; background-color: red; }
p { width: auto; margin-left: 20px; margin-right: -80px; }
p的總寬度計算為（20px + (請計算p寬度) - 80px）= 300px //div 寬度
答案是：360px，所以 _p_ 段部分文字會溢出，直到符合 360px 再折行
右邊超出的情況2:-
div{width:300px; background-color: red;}
p {width:400px; margin-left: 20px; margin-right: auto;}
p的總寬是400px，這裏會有兩個問題。(1)超出了親層寬度導致 過度受限(overconstrained)，成功激活margin-right: auto，讓文字超出親層寬度範圍，(2)直到符合400px再折行。
p的總寬度計算為（20px + 400px - 120px(margin-right)）= 300px //div寬度
stackoverflow.com/questions/66210839/why-is-right-margin-of-overconstrained-element-not-behaving-as-expected
請問::after跟:after 有什麼差別嗎?
不嚴謹的說，沒差。嚴謹的說有差。但基本上你目前寫哪個都可以就是了。
老師我想請問一個問題，就是最後如果想要置中要怎麼做呢
我原本以為在.wrap{}內加上align-content: center:即可但卻沒有
html,body{
height:100%
}
body{
display: flex;
align-items: center;
}
要先給予高度這樣才有辦法置中喔
有錯的話麻煩請其他大大指導
前兩個禮拜開始從頭把金魚看完，真的收穫很多，如影片開頭說的之前學過但不是很理解。
透過老師講解觀念真的有通了的感覺，好期待接下來會有更多的教學！！
雖然自己的速度還是很慢，但每天還是會練習一下～～
感謝老師
感謝支持，喜歡就分享給身邊更多朋友吧，希望能多點訂閱嚕^^
感謝啦
老師，您好
想請問一下如果互動圖文裡面的文字需要做到rwd的話，用什麼方式會比較好實現呢?
就手機直接顯示就好囉
可樂老師你好，我想請教一個疑問，在9:45分只寫
top=0 ;
right=0 ;
display :flex ;
flex-direction: column;
justify-content: center;
只是沒加bottom=0 ;就無法垂直置中 是什麼原因呢??
可樂老師你好，我想請教一個很愚蠢的疑問...關於9:20秒~9:50秒的
display:flex;
justify-content: center;
flex-direction: column;
為什麼要設定flex? 為什麼要設定flex? 用margin可以嗎?
請老師指點
用 margin 不行喔，因為內容文字的數量可能會有多有少，這時候你用 margin 的話無法達到我們想要的垂直居中的效果，如果你想要使用 margin 的話，那麼就會需要多加幾層的 div，這樣可能要講解的東西就變多了，所以這次的金魚為了節省時間，多是採用 flex 也是這原因。
想了解垂直置中的技巧的話，可以參考這邊的幾篇文章
>>CSS垂直置中技巧，我只會23個，你會幾個
csscoke.com/2018/08/21/css-vertical-align/
>>連續30天的超實務網頁設計的垂直置中教學
ithelp.ithome.com.tw/users/20112550/ironman/2092
我的馬>< 這個好實用哦！！感謝！！
哈哈，其實有好幾個都是實務上面常用到的啦，就看你們遇不遇的到了^^
老师 請問你的“*”就直接打出reset指令是怎樣弄的？
使用自訂的 snippet ，看你用的是哪套編輯器，你可以用「snippet」這個關鍵字去查一下怎麼製作自訂的 snippet（片段） 喔
@@CSScoke 非常感谢！ 找到我需要的影片 目前已经抓到如何自定义自己需要的code
@@CSScoke 也是嗎!?
@@rizer9276 這是編輯器本身就有的功能喔
@@CSScoke 是打style然後按tab嗎?
我這樣打出現
請問 8:13 .txt怎麼一起刪掉
先選取一段你要刪掉的文字，接著按一下「Ctrl + D」就能選到其他相符的字串，選完之後按鍵放掉，再按一下 Ｄｅｌｅｔｅ就好了
老師請問一下 *{
padding: 0;
margin: 0;
list-style: none;
}
跟金魚版之前rest講的 meyerweb.com/eric/tools/css/reset/index.html
一般來說 用下載下來的rest.css 比較好是嗎?
沒有好壞差別，純粹是看公司團隊用哪種，以及專案需求來決定。
中槍，都市傳說破解啦，原來父層不是一定要用相對定位
嘿嘿嘿，應該有一堆人都中槍吧
老師金魚2好短哈哈 剛看得起勁的時候就沒了QQ
不過還是超喜歡老師的教學 真是受益良多
金魚系列都走入門而已，要深入的話的確要講很久，切板會有很多細節可以談，包含RWD更多考量跟心法，那個通常會在上課說，金魚就比較不適合了，太多原理跟理論大家應該會看到睡著XD
現在每天都在期待老師出的影片哈哈
老師加油💪
到底後面還會有些甚麼樣的版面呢? 就讓我們繼續看下去~
....好奇怪，我用visual studio code打出來的明明跟老師一樣，卻出不來.....
可惜我平常要上班沒時間看，我集中在假日看好了
期待老師的金魚2
都可以重播，放心的上班吧^^
Amos老師的影片總是能用最短的解說最清楚的方式讓我們了解，更破解我聽過的都市傳說XD 真的是受益良多，老師加油!!
感謝支持＾＾