自學網頁前端

閱讀時間約 1 分鐘
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
let header = document.querySelector("header");
let headerAnchor = document.querySelectorAll("header nav ul li a")
window.addEventListener("scroll",() => {
if (window.pageYOffset != 0){
header.style.backgroundColor ="rgba(72,60,139,0.3";
header.style.color = "white";
headerAnchor.forEach(a => {
a.style.color = "white";
})
} else{
header.style.backgroundColor = "";
header.style.color = "";
headerAnchor.forEach(a => {
a.style.color = "#381b11";
})
}
})
0會員
5內容數
留言0
查看全部
發表第一個留言支持創作者!
黎羊Leon的沙龍 的其他內容
今天是一位非資工系背景商科大學生的第一堂正式演算法課程,老師上課時先讓大家玩了猜數字的遊戲,我用了自己的運氣去猜測數字,才發現自己其實運氣真的不好。 接著我們透過自己所學過的程式語言,寫出了二分搜尋法以及猜數字的遊戲。 我分別用了JS以及Python寫出。
今天是一位非資工系背景商科大學生的第一堂正式演算法課程,老師上課時先讓大家玩了猜數字的遊戲,我用了自己的運氣去猜測數字,才發現自己其實運氣真的不好。 接著我們透過自己所學過的程式語言,寫出了二分搜尋法以及猜數字的遊戲。 我分別用了JS以及Python寫出。
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
Thumbnail
想要自學 HTML 嗎?HTML 是一個相對簡單的標記語言,適合初學者。透過免費資源和互動平臺,你可以輕鬆地學習 HTML,並逐步提高技能。除了 HTML,你還可以瞭解免費網頁設計軟體,如 VS Code 和 Sublime Text。加油吧!
Thumbnail
學習日文常見的難題,你也有遇到嗎? ・學完基礎日文後,如何繼續進步? ・沒有機會用日文,怎麼維持水平? ・追日劇專注劇情,學到日文有限? 如何學好一門語言:『理解』+『重複』
Thumbnail
本文介紹了 Google Analytics 4(GA4)示範帳戶的取得方式,並提供了幾種 GA4 分析小練習,讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習,旨在幫助讀者更熟悉 GA4 這個工具。
Thumbnail
塔羅牌可以自學嗎?當然可以囉!對我來說,塔羅牌就是一個 “工具”,像是連接你的直覺、集體潛意識一樣,並透過牌卡上的圖像、你看到它的感受,給予對應的指引…我個人是覺得,塔羅牌不一定非要找 “名師學習”,塔羅牌是個人人都能上手,而且靠著一步步的練習,就能解讀潛意識的工具。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
Thumbnail
想要自學 HTML 嗎?HTML 是一個相對簡單的標記語言,適合初學者。透過免費資源和互動平臺,你可以輕鬆地學習 HTML,並逐步提高技能。除了 HTML,你還可以瞭解免費網頁設計軟體,如 VS Code 和 Sublime Text。加油吧!
Thumbnail
學習日文常見的難題,你也有遇到嗎? ・學完基礎日文後,如何繼續進步? ・沒有機會用日文,怎麼維持水平? ・追日劇專注劇情,學到日文有限? 如何學好一門語言:『理解』+『重複』
Thumbnail
本文介紹了 Google Analytics 4(GA4)示範帳戶的取得方式,並提供了幾種 GA4 分析小練習,讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習,旨在幫助讀者更熟悉 GA4 這個工具。
Thumbnail
塔羅牌可以自學嗎?當然可以囉!對我來說,塔羅牌就是一個 “工具”,像是連接你的直覺、集體潛意識一樣,並透過牌卡上的圖像、你看到它的感受,給予對應的指引…我個人是覺得,塔羅牌不一定非要找 “名師學習”,塔羅牌是個人人都能上手,而且靠著一步步的練習,就能解讀潛意識的工具。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。