iT邦幫忙

前端相關文章
共有 535 則文章

技術 JS筆記-五種方法判斷input是否為"ALL"?

前情提要 "判斷使用者輸入"的方法 如果要給使用者prompt,就勢必會用if判斷輸入的內容。假設想判斷使用者是否輸入all(如果是大寫也可...

技術 前端小試身手(10)--lurl圖床之自動帶入密碼

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

技術 前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

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

鐵人賽 自我挑戰組 DAY 30
從零開始學習前端 系列 第 31

技術 #從零開始3️⃣0️⃣:後記

關於這個系列 這篇為這個系列的最後一篇! 終於完成了三十天的挑戰! 有許多地方沒有寫好、做好的部分,在實作的部分有許多細節沒有捕到…至少有完成挑戰(對自己有個交...

鐵人賽 自我挑戰組 DAY 30
從零開始學習前端 系列 第 30

技術 #從零開始2️⃣9️⃣:切版實作(8)商品 RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 SideProject30 DAY 30

技術 營養師不開菜單的第三十天 - 蛻變成為網頁工程師

前言 營養師不開菜單系列來到第三十天,首先謝謝有觀看到最後一天的讀者,也恭喜堅持到最後一天的你和我。在部署之後,應用程式上線後,我們就這樣結束了嗎?還是我們可...

技術 【前端動手玩創意】看來要使用那招了嗎?fetch你的email出來(15)

目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...

鐵人賽 自我挑戰組 DAY 29
從零開始學習前端 系列 第 29

技術 #從零開始2️⃣8️⃣:切版實作(7)商品

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 28
從零開始學習前端 系列 第 28

技術 #從零開始2️⃣7️⃣:切版實作(6)商品選單 RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

技術 前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!

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

鐵人賽 自我挑戰組 DAY 27
從零開始學習前端 系列 第 27

技術 #從零開始2️⃣6️⃣:切版實作(5)商品選單

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

技術 前端小試身手(7)--迷片靜音神隊友,讓你尷尬不再有!

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

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

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

鐵人賽 自我挑戰組 DAY 26
從零開始學習前端 系列 第 26

技術 #從零開始2️⃣5️⃣:切版實作(4)nav&footer RWD

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 自我挑戰組 DAY 25
從零開始學習前端 系列 第 25

技術 #從零開始2️⃣4️⃣:切版實作(3)nav&footer

github pages:https://rochelwang1205.github.io/sweetie/ github repo:https://githu...

鐵人賽 Modern Web DAY 25

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。 原理和 Day14 今天我想來點… 純 CSS 的開關 一樣,都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

鐵人賽 自我挑戰組 DAY 24
從零開始學習前端 系列 第 24

技術 #從零開始2️⃣3️⃣:切版實作(2)mixin設定

撰寫手機樣式(@media可以參考#從零開始1️⃣6️⃣:RWD!!@media(max-width)和@media(min-width)這篇) 我設定了幾個斷...

鐵人賽 自我挑戰組 DAY 23
從零開始學習前端 系列 第 23

技術 #從零開始2️⃣2️⃣:切版實作(1)環境建立

匯總前二十幾篇學習到的,接下來會以甜點店商設計稿(可商用)的產品頁(product)實際操作練習。 觀察設計稿有沒有通用、重複的部分 設計稿導覽列和頁尾部分似乎...

鐵人賽 Modern Web DAY 22

技術 【Day22】淺談 React.js(1)React基本構成 & 語法

在上一篇的教學中,我們成功建立了一個React的專案。建立完畢後,會發現我們的檔案資料夾突然多了好多沒看過的東西: 慘了,完全看不懂——沒關係!接下來將帶您認...

鐵人賽 自我挑戰組 DAY 22
從零開始學習前端 系列 第 22

技術 #從零開始2️⃣1️⃣:學習使用SCSS/Sass(下)

擴展/繼承(Extend/Inheritance) 我們可以定義一組樣式,然後將這些樣式應用於不同的元素,同時保持代碼的整潔和可維護性。 使用@extend...

鐵人賽 自我挑戰組 DAY 21
從零開始學習前端 系列 第 21

技術 #從零開始2️⃣0️⃣:學習使用SCSS/Sass(上)

根據官方文件說明,Sass有兩種語法,最常用的是SCSS語法(.scss),而另一種的縮排語法(.sass)則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式...

鐵人賽 自我挑戰組 DAY 20
從零開始學習前端 系列 第 20

技術 #從零開始1️⃣9️⃣:寫CSS寫的心好累-Sass

當一個專案變得越來越大,CSS的複雜性也隨之增加,要管理龐雜的程式碼變得很麻煩。這篇開始要介紹的Sass,可以幫助我們解決這些問題,並將CSS代碼組織得更加結構...

鐵人賽 Modern Web DAY 20

技術 【Day20】常見切版應用(3-2)頁頂Header RWD實作

上一篇中我們完成了header的切版應用、介紹了錨點(Anchor)、還做了一點主頁面的切版: 那我們接續上一篇的內容,而當我們使用手機裝置打開此網頁,會發現...

鐵人賽 自我挑戰組 DAY 19
從零開始學習前端 系列 第 19

技術 #從零開始1️⃣8️⃣:寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(下)

OOCSS(Object-Oriented CSS) OOCSS(Object-Oriented CSS)強調了分離結構和外觀的概念。以下是 OOCSS...

鐵人賽 自我挑戰組 DAY 18
從零開始學習前端 系列 第 18

技術 #從零開始1️⃣7️⃣:寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(上)

在前端開發中,CSS 的組織和管理變得至關重要,特別是當項目變得越來越龐大時。為了使 CSS 更易於維護、擴展和協作,有三種常見的設計模式被廣泛使用:SCSS、...

鐵人賽 Vue.js DAY 18

技術 DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX

DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX Vue3 + Vite + Nuxt 這次我主要是選擇使用Vue3 +...

鐵人賽 自我挑戰組 DAY 17
從零開始學習前端 系列 第 17

技術 #從零開始1️⃣6️⃣:RWD!!@media(max-width)和@media(min-width)

接續上一篇#從零開始15:怎麼設定照片大小,這篇要討論@media(max-width)和@media(min-width)。 在網頁設計中,響應式網頁設計(R...

鐵人賽 自我挑戰組 DAY 16
從零開始學習前端 系列 第 16

技術 #從零開始1️⃣5️⃣:怎麼設定照片大小

設定圖片高度,要寫死高度還是不要寫死高度? 就像最開始提到,響應式網頁超級超級重要,所以如果在不同螢幕大小,圖片太大超出畫面(或著太小)的話,體驗感覺就會大大地...

鐵人賽 自我挑戰組 DAY 15
從零開始學習前端 系列 第 15

技術 #從零開始1️⃣4️⃣:使用emmet,更快寫出腦中所想

在比較熟悉如何架構網頁、呈現出想要的樣子後,應該多少會覺得:希望能夠更快、更有效率地描繪出來。 最直接想到的或許是提升英文打字速度,這會有幫助,但還不夠。 我們...

鐵人賽 Modern Web DAY 15

技術 【Day15】專題實作:簡易計算機

前些日子呢,我們一同學習了許多有關網頁三件套 —— HTML、CSS、JS的內容。納在本日的篇章中,我將帶著您使用這幾日所學,來實作出一個計算機的應用! 完成效...