自學網頁前端

更新於 2022/03/02閱讀時間約 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";
})
}
})
avatar-img
0會員
5內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
黎羊Leon的沙龍 的其他內容
今天是一位非資工系背景商科大學生的第一堂正式演算法課程,老師上課時先讓大家玩了猜數字的遊戲,我用了自己的運氣去猜測數字,才發現自己其實運氣真的不好。 接著我們透過自己所學過的程式語言,寫出了二分搜尋法以及猜數字的遊戲。 我分別用了JS以及Python寫出。
今天是一位非資工系背景商科大學生的第一堂正式演算法課程,老師上課時先讓大家玩了猜數字的遊戲,我用了自己的運氣去猜測數字,才發現自己其實運氣真的不好。 接著我們透過自己所學過的程式語言,寫出了二分搜尋法以及猜數字的遊戲。 我分別用了JS以及Python寫出。
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 那麼今天要來教大家,如何實現各種排版,以及不同的 CSS 可以做出怎樣的效果。 整理好你的思緒,深深吸一口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。 字體相關 color 設定文字的顏色。 <p style="color: blue;">這是藍色文字。</
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 那麼今天要來教大家,如何實現各種排版,以及不同的 CSS 可以做出怎樣的效果。 整理好你的思緒,深深吸一口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。 字體相關 color 設定文字的顏色。 <p style="color: blue;">這是藍色文字。</
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。