iT邦幫忙

前端新手村相關文章
共有 335 則文章
鐵人賽 Modern Web DAY 4

技術 33歲轉職者的前端筆記 DAY 4 固定浮動選單 RWD 寫法

隨著智慧型手機的普及 網頁設計也要隨著時代的潮流而寫出適合智慧型手機用戶的網頁 今天的筆記是目前最常見的 RWD 應用:固定浮動選單 首先先上範例圖: 背景雖...

技術 [快速入門前端 15] CSS 選擇器 (5) Pseudo-Classes 偽類 - UI狀態偽類、否定偽類、目標偽類、語言偽類

UI 元素狀態偽類 是指依照該元素目前的狀態(如是否勾選、是否被禁用)作為選擇器進行選擇,主要分為三種 :checked、:disabled 及 ':enabl...

技術 [鼠年全馬鐵人挑戰] Week27 - JavaScript 練習題- 比較運算子

這周來練習比較運算子,也是我不太熟練的一個章節要好好努力練習了~ 題目 請觀看以下文章後,解答以下題目: [JS] 判斷筆記 比較運算子 重新認識 JavaSc...

技術 [快速入門前端 18] CSS 選擇器的權重

選擇器的優先順序 當我們使用多個選擇器選中同個元素,並賦予某個屬性不同值時,就會產生樣式衝突。舉例來說,當我們在 A 選擇器將元素的顏色設為紅色,又用 B 選擇...

技術 [鼠年全馬鐵人挑戰] Week18 - 超新手學前端 - HTML table 小概念

又過了一周啦~最近開始學習如何用 table 排版,在學習的過程中順手記下筆記讓自已更有概念:) 何謂table table 是在 HTML 排版的一種方式,主...

鐵人賽 Modern Web DAY 24
33歲轉職者的前端筆記 系列 第 24

技術 33歲轉職者的前端筆記-DAY 24 jQuery DOM 節點

jQuery 與 DOM 節點 .parent() / .parents() 往上層找到符合條件的元素,parent() 只往⾃⼰上⼀層找,⽽ parents...

技術 [快速入門前端 17] CSS 選擇器 (7) 選擇器總結

基本選擇器 選擇器 說明 語法 通配符 作用範圍為所有標籤,用於頁面整體樣式 * { color: red } 元素 作用於同種標籤,不能進行...

技術 [快速入門前端 27] Overflow 和 Visibility

Overflow 溢出 CSS 的 overflow 屬性通常用於指定元素內容超過該元素範圍大小時的呈現方式,例如文字內容超過其父元素的寬度、圖片超過預設區域的...

鐵人賽 自我挑戰組 DAY 29

技術 新手村29 - Countdown Timer

29 - Countdown Timer 俗話說的好,一天一蘋果,醫生遠離我 一天一 JS,What the f*ck JavaScript? small st...

技術 鼠年全馬鐵人挑戰 WEEK 09: 月亮圓又圓,用 border-radius 讓你圓又圓

雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化,讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。 如何使用...

技術 鼠年全馬鐵人挑戰 WEEK 04:人要衣著,佛要金裝!用CSS為網頁穿上衣服

如果說html是人,css就是衣服。俗話說:人要衣著,佛要金裝。穿搭得宜,宅男都會變型男無誤。 首先我們先在css資料夾下建立一個style.css,然後在ht...

技術 前端小試身手(6)--IMG複製大師,懶人專用小腳本

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 [快速入門前端 45] JavaScript:條件判斷 (2) switch 語句

switch 語句 當條件式選項很多時使用 if-else 會很繁雜,這時候就可以考慮使用 switch 語句。在 switch 中,括號內的表達式會依次和 c...

技術 鼠年全馬鐵人挑戰 WEEK 17: CSS transform

transform:(動作的函數),通常會配合animation或:hover來做些動畫效果 範例 transform-origin:x y; 指定動作的參考點...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04 HTML<表單標籤>

表單標籤主要功用是用來收集使用者資料 常用情況 : 註冊頁面... 主要由 表單域、表單元素、提示文字 這三種內容組成 以MOMO註冊頁面為範例: 1.表單域...

鐵人賽 Modern Web DAY 18

技術 null VS. undefined

null 和 undefined 代表著缺少值或未定義的狀態。儘管它們在 JavaScript 中也存在,但在 TypeScript 中,可以使用靜態型別檢查來...

技術 [快速入門前端 19] CSS 三大特性:層疊性、繼承性、優先級

層疊性 當元素的樣式發生衝突時,瀏覽器會根據規則(權重)進行樣式層疊(覆蓋)。 樣式衝突是指某元素特同個樣式名被設為不同值,例如一個元素同時擁有 color:...

鐵人賽 Modern Web DAY 6

技術 33歲轉職者的前端筆記-DAY 6 CSS button 套件

最近的工作專案很常用到 button 按鈕 因為小公司的關係沒有設計 所以通常要自已想 button 按鈕樣式 但沒有設計腦真的很難想要怎麼呈現顏色跟效果 今天...

鐵人賽 Modern Web DAY 12
實作經典 JavaScript 30 系列 第 12

技術 Day12: 在Canvas畫布上,用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能 1.更改畫筆的顏色,讓畫筆畫出彩虹的顏色這邊是使用HSL色彩概念,HSL即色相、飽和度、亮度(hue,Saturation...

鐵人賽 Modern Web DAY 6
實作經典 JavaScript 30 系列 第 6

技術 Day06: 針對陣列的操作練習(二)

WES BOS系列影片Alex快速導讀系列影片 做完基礎陣列練習後,來做些進階的練習 進階練習目標 :6.Sort the inventors by years...

技術 [快速入門前端 41] JavaScript:運算式和運算子 (2) 指定運算子、比較運算子、邏輯運算子

運算子 指定運算子 指定運算子通常用來指定一個值給變數 ( 賦值 ),最基本的就是我們常用到的運算符 =,會將符號右邊的值賦予到左邊的變數中。 運算子 意...

鐵人賽 自我挑戰組 DAY 1
小白網頁設計練成記 系列 第 1

技術 小白網頁設計練成記-DAY1-前言

我原本在蘇州一家化妝品公司擔任特助兩年,由於是小微企業,所以其工作基本要三項全能,今年嚴峻的疫情蘇州基本上半年停工,當然公司也瀕臨倒閉。 在大陸兩年裡,數字經濟...

鐵人賽 Modern Web DAY 29
實作經典 JavaScript 30 系列 第 29

技術 Day29: Event Capture, Propagation, Bubbling and Once

WES BOS系列影片Alex快速導讀系列影片 今天比較偏觀念的講解主要是希望能較深入理解addEventListener()學習DOM的事件機制,包括事件捕獲...

鐵人賽 自我挑戰組 DAY 14

技術 Day14 - 編碼順序和字典順序

嗨,大家好!我是 Eric。今天我們要探討一個很有趣的主題:字典順序。不同於編碼順序,字典順序有它獨特的排序邏輯,接下來讓我們來看一個具體的例子。 台灣城市排序...

技術 [快速入門前端 24] CSS 常見屬性(4) 背景和滑鼠動態屬性

背景 我們之前介紹 CSS 顏色時有說過 background-color 可以指定元素的背景顏色,但其實在背景中除了顏色外我們還能做更多變化,下面就讓我們花點...

鐵人賽 Modern Web DAY 27
實作經典 JavaScript 30 系列 第 27

技術 Day27:Speech Synthesis

WES BOS系列影片Alex快速導讀系列影片 今天來認識 Web Speech API中的兩個功能一個是 SpeechSynthesisUtterance它包...

鐵人賽 自我挑戰組 DAY 6

技術 Day6 - 進度監聽器 XHR

嗨大家好,我是Eric。當談到API請求,我們通常會使用fetch、axios等現代的方法,但有一個我們可能忽略的功能,是由傳統的XHR(XMLHttpRequ...

鐵人賽 Modern Web DAY 13
實作經典 JavaScript 30 系列 第 13

技術 Day13: 認識console

WES BOS系列影片Alex快速導讀系列影片 今天比較輕鬆,作者帶我們深入了解console的一些使用方法,記錄下來,也許那天突然就會用到也不一定。 作者有準...

技術 [快速入門前端 16] CSS 選擇器 (6) 偽元素選擇器

偽元素 偽元素,指的是元素中一些特殊的位置,因為他不是一個真正的元素,所以被稱為偽元素。偽元素在選擇器中的寫法為 ::偽元素,下面就讓我們來介紹常見的偽元素吧!...

技術 [快速入門前端 59] JavaScript:DOM (1) Document Object Model 簡介

DOM 是什麼? 到目前為止我們大約花了二十多個篇幅來介紹 JavaScript 的基本用法,可能有人會想說講了這麼多,JavaScript 跟畫面到底有什麼關...