ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
15:42沒作用的原理是因為超連結為inline特性而transform不適用於inline特性 所以只要把nav轉成display:flex或是在.main-nav a 底下加入display: inline-block;transform的效果就可以出來了
沒錯，不過錄影當下凌晨時腦袋不清，就卡了一下XD
謝謝！
感謝支持
請問老師~13:13 設定 height: 0 的用意是??5:13 這個 icon 中文化的套件，vs code有類似的套件嗎~??
老師您好，解決transform: translateY移動問題為什麼在.main-header .main-nav加了display: flex;就可以了呢?一直想不通QQ
轉換物件的屬性就能產生作用，inline屬性無法作用
CSScoke 好的 我理解了 我會再多做些範例來試試看 謝謝老師🙏
老師你好 想請問在 6:53 中選取文字的快捷鍵是什麼呢? 謝謝
Shift ＋ 方向鍵啊
老師請問您一般在寫網頁時，會先把架構和互動連同寫完，還是寫完所有架構再加入互動呢？亦或是因人而異，其實都可以ＸＤ？感謝老師
我多數都是先把架構跟基本的視覺寫完，之後再補互動，因為至少版面要先正常啊，且這樣的流程比較可以掌控整體的進度，如果專注在某一個互動上面的話，可能會卡在某個地方或區域花太多時間，反倒讓整體進度拖慢，這是我的經驗，分享給你^^
@@CSScoke 謝謝老師！我知道了
老師，nav導覽列我這裡為了避免hover連續觸發造成閃爍現象，所以在超連結外面加了div，把hover設在div上再把posirion:relative移到div來規避掉這個問題
老師 想請問8:20 您使用了 .main-header .main-nav { margin: 0 auto;}想請教我在.main-header .container 中使用 justify-content: space-between; 的這個方法 您會使用嗎 個人拙見這樣似乎比較直觀(?) 感謝
老師不好意思，請問怎麼丟字型進去呢？
發現在Safari 看到的input樣式跑掉但在Chrome正常，使用 Reset CSS 也清除不行。 改用 -webkit-appearance:none; 後才正常顯示 .main-header .header-search input[type="search"] { -webkit-appearance:none; border-radius: 200px 0 0 200px; }
林呱呱 不一樣是正常的，每個瀏覽器都有各自的問題存在，這個細節就讓大家各自發現囉
想看超過半小時的導覽列製作XD (敲碗
看來你沒看過這兩段影片(丟筆th-cam.com/video/7BydlKueTgY/w-d-xo.htmlth-cam.com/video/9xT8kziyYko/w-d-xo.html
@@CSScoke 結果看完這部不久，就看到下一部了XDDD
@@蘇為菁-h6n XDDDD
老師您好， 請問css可以做到我A hover或focus時 B產生效果嗎？ 如果B (button) 不是A (input) 的子層 例如 input在被點擊focus狀態時 button裡的icon變色
林柏宏 看一下這個選取器吧ithelp.ithome.com.tw/m/articles/10220656
請問老師 5:16 改成 這行要怎麼 + 他不像Button 可以用 我用value 又不能放入 標籤
不能放，但可以把圖示變成圖片，當成背景圖設定給 input或者改用 標籤
.main-header .main-nav a { /* 改變 a 標籤 */ display: inline-block; ... }這是不加 display: flex 的用法，一樣能有位移效果請問老師覺得哪個方式比較有優勢呢?
對我來說，看專案的性質，沒有下甚麼特別條件的情況下，都很OK阿真的要談哪個有優勢，那就要先有需求跟條件，不然怎麼比較呢?
@@CSScoke 恩恩，沒有先決條件的確無從比較，感謝老師的回覆~
@@asd8116 對阿，這就像是我寫了23種垂直居中的方式，但經常會有人問我說哪種比較【好】，這......真的很難回答阿，對我來說都好啊，技術本身哪來好壞? 把他運用的好才叫【好】阿^^
老師你好~我在.main-nav a:after{ content: ''; height: 0; position: absolute; left: 50%; right: 50%; bottom: -10px; border-bottom: 1px solid #fff; transition: .3s; }left: 50%;right: 50%;這兩個屬性能將線條變不見,這個理解不了~不知道該怎麼解釋呢?另外我用另一個方式去表現線的css如下.main-nav a:after{ content: ''; position: absolute; width: 100%; height: 1px; background: #fff; display: block; }但線卻沒有出現,這又是哪裡理解錯誤呢?感謝老師的解答
第一個問題在寬度是多少?第二個問題是你物件的位置在哪裡?試著想看看吧^^
加上left: 0;right: 0;看看~不知道老師指的是不是這個
我看影片時也稍微花了幾分鐘理解了一下，左50%、右50%代表這東西在中間，0是回到最左跟最右的位置，所以會往兩側位移
不知道有没有sublime的专门讲解，我觉得这个可以讲一个，一些快捷键什么的真的都不懂
這邊有我多年前的簡報，可以看一下www.slideshare.net/banPrint/sublime-text-51689543另外這邊也有我免費的影片教學也可以看一下www.udemy.com/course/sublime-text3/
15:42沒作用的原理是因為超連結為inline特性
而transform不適用於inline特性
所以只要把nav轉成display:flex
或是在.main-nav a 底下加入
display: inline-block;
transform的效果就可以出來了
沒錯，不過錄影當下凌晨時腦袋不清，就卡了一下XD
謝謝！
感謝支持
請問老師~
13:13 設定 height: 0 的用意是??
5:13 這個 icon 中文化的套件，vs code有類似的套件嗎~??
老師您好，解決transform: translateY移動問題
為什麼在.main-header .main-nav加了display: flex;就可以了呢?
一直想不通QQ
轉換物件的屬性就能產生作用，inline屬性無法作用
CSScoke 好的 我理解了 我會再多做些範例來試試看 謝謝老師🙏
老師你好
想請問在 6:53 中選取文字的快捷鍵是什麼呢?
謝謝
Shift ＋ 方向鍵啊
老師請問您一般在寫網頁時，會先把架構和互動連同寫完，還是寫完所有架構再加入互動呢？
亦或是因人而異，其實都可以ＸＤ？
感謝老師
我多數都是先把架構跟基本的視覺寫完，之後再補互動，因為至少版面要先正常啊，且這樣的流程比較可以掌控整體的進度，如果專注在某一個互動上面的話，可能會卡在某個地方或區域花太多時間，反倒讓整體進度拖慢，這是我的經驗，分享給你^^
@@CSScoke 謝謝老師！我知道了
老師，nav導覽列我這裡為了避免hover連續觸發造成閃爍現象，所以在超連結外面加了div，把hover設在div上再把posirion:relative移到div來規避掉這個問題
老師 想請問8:20 您使用了
.main-header .main-nav {
margin: 0 auto;
}
想請教我在.main-header .container 中使用 justify-content: space-between; 的這個方法 您會使用嗎 個人拙見這樣似乎比較直觀(?) 感謝
老師不好意思，請問怎麼丟字型進去呢？
發現在Safari 看到的input樣式跑掉但在Chrome正常，使用 Reset CSS 也清除不行。
改用 -webkit-appearance:none; 後才正常顯示
.main-header .header-search input[type="search"] {
-webkit-appearance:none;
border-radius: 200px 0 0 200px;
}
林呱呱 不一樣是正常的，每個瀏覽器都有各自的問題存在，這個細節就讓大家各自發現囉
想看超過半小時的導覽列製作XD (敲碗
看來你沒看過這兩段影片(丟筆
th-cam.com/video/7BydlKueTgY/w-d-xo.html
th-cam.com/video/9xT8kziyYko/w-d-xo.html
@@CSScoke 結果看完這部不久，就看到下一部了XDDD
@@蘇為菁-h6n XDDDD
老師您好， 請問css可以做到我A hover或focus時 B產生效果嗎？ 如果B (button) 不是A (input) 的子層
例如 input在被點擊focus狀態時 button裡的icon變色
林柏宏 看一下這個選取器吧
ithelp.ithome.com.tw/m/articles/10220656
請問老師 5:16 改成 這行要怎麼 +
他不像Button 可以用 我用value 又不能放入 標籤
不能放，但可以把圖示變成圖片，當成背景圖設定給 input
或者改用 標籤
.main-header .main-nav a {
/* 改變 a 標籤 */
display: inline-block;
...
}
這是不加 display: flex 的用法，一樣能有位移效果
請問老師覺得哪個方式比較有優勢呢?
對我來說，看專案的性質，沒有下甚麼特別條件的情況下，都很OK阿
真的要談哪個有優勢，那就要先有需求跟條件，不然怎麼比較呢?
@@CSScoke 恩恩，沒有先決條件的確無從比較，感謝老師的回覆~
@@asd8116 對阿，這就像是我寫了23種垂直居中的方式，但經常會有人問我說哪種比較【好】，這......真的很難回答阿，對我來說都好啊，技術本身哪來好壞? 把他運用的好才叫【好】阿^^
老師你好~
我在
.main-nav a:after{
content: '';
height: 0;
position: absolute;
left: 50%;
right: 50%;
bottom: -10px;
border-bottom: 1px solid #fff;
transition: .3s;
}
left: 50%;
right: 50%;
這兩個屬性能將線條變不見,這個理解不了~不知道該怎麼解釋呢?
另外
我用另一個方式去表現線的css如下
.main-nav a:after{
content: '';
position: absolute;
width: 100%;
height: 1px;
background: #fff;
display: block;
}
但線卻沒有出現,這又是哪裡理解錯誤呢?
感謝老師的解答
第一個問題在寬度是多少?
第二個問題是你物件的位置在哪裡?
試著想看看吧^^
加上
left: 0;
right: 0;
看看~不知道老師指的是不是這個
我看影片時也稍微花了幾分鐘理解了一下，左50%、右50%代表這東西在中間，0是回到最左跟最右的位置，所以會往兩側位移
不知道有没有sublime的专门讲解，我觉得这个可以讲一个，一些快捷键什么的真的都不懂
這邊有我多年前的簡報，可以看一下
www.slideshare.net/banPrint/sublime-text-51689543
另外這邊也有我免費的影片教學也可以看一下
www.udemy.com/course/sublime-text3/