iT邦幫忙

網頁前端相關文章
共有 112 則文章
鐵人賽 Modern Web DAY 3

技術 Day 03 HTML/CSS 使用 tailwindcss 遇到的小問題

tailwindcss 是新世代的框架,常常拿來跟 Bootstrap 比較套句老師上課說的話,單純比較框架之間的好壞是沒有意義的只要評估你現在做的專案適合哪個...

技術 【前端動手玩創意】哇操!你敢信?花式寫todo-list,body裡面一行都沒有也能搞?(9)

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

鐵人賽 自我挑戰組 DAY 26

技術 第二十六步 - 最後破關的條件(CSS總整理)

大家好,我是喵橘,今天我要總整理一下 CSS 的相關知識,並且,補充之前沒有說明到的部分。 區塊陰影設定 想要讓一個區塊或物體更加生動,就可以添加陰影效果,假如...

鐵人賽 自我挑戰組 DAY 20

技術 第二十步 - 欺騙的幻覺背景(CSS 背景)

星期六假日,我是喵橘,先開心去看電影...咦?晚點再講解 CSS 背景部分。 CSS 背景 背景色彩設定 網頁除了文字的變化,也別忘記背景也能做設計,顏色調整...

鐵人賽 Modern Web DAY 18
鉄人28号FX 系列 第 18

技術 鉄人28号FX 鉄人18号「左右蛙」text-align, text-align-last

★ 地圖西北方峽谷森林 ↓↓↓ 顯示峽谷森林位置圖 睡前數羊數著數著……天就亮了。 眼前好美啊! 痾?? ) 峽谷瀑布 [左右蛙]: 為什麼總是一再找麻煩? 你...

技術 新手學前端-JavaScript:資訊如何帶進去的語法

Html語法: < p >這一顆紅豆餅是< em id="price">< /em >元 < /...

鐵人賽 自我挑戰組 DAY 17

技術 第十七步 - 找尋結果的寶藏(HTML 設計整合練習)

各位大家好,我是喵橘,今天 HTML 設計整合練習,有一些練習題目和解析,重新複習之前所學的知識: 練習總成果展現 <!DOCTYPE html>...

鐵人賽 自我挑戰組 DAY 10

技術 第十步 - 遇到迷宮,小心迷路(文章會使用的標籤語法)

大家好,終於走到第十天,我是喵橘,讓我喝點茶,再繼續出發吧! 首先,是一些撰寫文章內容的語法,一個一個說給大家聽。 文章會使用的標籤語法 <p> 標籤 <p>...

技術 關注點分離(Separation of Concerns) 簡介與實作技巧

以下是我整理完文章後理解的內容,若有任何錯誤,都歡迎留言給我,謝謝 軟體開發中關注點分離的重要性 實現關注點分離可以提高程式碼的可讀性、可維護性和可擴展性。...

技術 JS筆記-VScode自己設定速打

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

鐵人賽 自我挑戰組 DAY 3

技術 第三步 - 打開地圖,探訪第一站( HTML入門介紹)

大家好,我是喵橘,今天要為大家詳細介紹 HTML 的基礎部分。 HTML 的歷史 前一章節,有簡單提到過網頁是由 HTML 所組成,它中文的名稱叫做超文本標記語...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 HTML5 <HTML5 input類型、表單標籤>

HTML5新增的input類型: &lt;!-- 需添加form表單域 --&gt; &lt;form action=&quot;&quot;&gt;...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 CSS <屬性書寫順序 & 網頁布局-標準布局>

CSS屬性書寫順序建議 建議遵循以下順序 1. 布局定位屬性 : display / position / float / clear / visibility...

鐵人賽 自我挑戰組 DAY 18

技術 第十八步 - 第二層挑戰,黑白幻影交錯( CSS基本選擇器)

大家早安,我是喵橘,最近的天氣慢慢轉涼,已經有點秋天的味道呢,今天是講解 CSS基本選擇器。 CSS 選擇器各種類介紹 前面章節已經簡單講解 CSS 的基本概念...

技術 JS筆記-暫時讓網頁可以編輯

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

鐵人賽 自我挑戰組 DAY 7

技術 第七步 - 找尋到關鍵的密鑰(網頁設計前的方便軟體推薦)

大家早安,我是喵橘,今天是炎熱的星期日,來寫點文章消消暑,微笑。 撰寫程式推薦的編輯器 在撰寫網頁相關的程式碼,需要有一個編輯器來協助你,HTML是一個純文字格...

技術 JS筆記-製作copy效果

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

鐵人賽 自我挑戰組 DAY 5

技術 第五步 - 靜靜思考,預想可能遭遇事件(Javascript 入門介紹)

各位大家早安,我是喵橘,今天要帶給各位 JavaScript 的基本概念 JavaScript 的歷史 Javascript 是由 NetScape 公司在 1...

技術 【前端動手玩創意】卡片製作,才不是!是卡片製作器!(10)

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

技術 【前端動手玩創意】一句CSS做出好看的hero section!(4)

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

技術 完全理解React的completeWork以及错误边界

點擊進入React源碼調試倉庫。 概述 每個fiber節點在更新時都會經歷兩個階段:beginWork和completeWork。在Diff之後(詳見深入理解R...

技術 【前端動手玩創意】自學之旅從這系列開始 (0)

寫文緣由 現在想要自學前端的人非常多,有些人汲汲營營迷失在網路的資訊大海嘯裡面,有些人想要犧牲金錢買來貴桑桑的課程,卻發現自己沒什麼成長。這些都是很可惜的彎路,...

鐵人賽 Modern Web DAY 15

技術 Day 15 JavaScript NodeList vs HTMLCollection

NodeList 與 HTMLCollection 的主要差異點是節點的類型不一樣: NodeList:包含多種節點,如:元素節點、文字節點、屬性節點、註解...

鐵人賽 自我挑戰組 DAY 30

技術 第三十步- 這不是最後一天,而是新的開始(Javascript 運算子)

大家好,我是喵橘,雖然今天是最後一天,但我還會繼續發文,但就限平時的時間,假日的時間我會去檢查之前的發文來做多次修改,許多部份可以進行補充與改正,是之後發文的方...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性用於定義字體系列、大小、粗細 和文字樣式(ex:斜體) 1.字體系列font-family 屬性定義文本的字體系列 &lt;st...

鐵人賽 自我挑戰組 DAY 1
開始入坑網頁吧! 系列 第 1

技術 重新學習JavaScript#JavaScript能做甚麼?

JavaScript (簡稱JS)是一種物件導向的程式語言 &quot;object orient programming language&quot;,也是最...

鐵人賽 自我挑戰組 DAY 8

技術 第八步 - 了解密鑰使用方法(設計框架所會遇到的常見問題)

悄悄的經過一個星期,又到了憂鬱的星期一,我是喵橘,今天我要講解設計框架所會遇到的常見問題。 網頁製作前預先準備的態度 網頁並不是直接程式就開始撰寫架構,需要依據...

鐵人賽 Modern Web DAY 5

技術 Day 05 JavaScript 同步(Sync) vs 非同步(Async)處理

筆者一開始看到這兩個詞的時候充滿著黑人問號???同步不是應該表示可以同時處理多件事,而非同步不是應該表示一次只能處理一件事嗎?怎麼實際上跟我原本的理解完全相反!...

技術 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~

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

鐵人賽 Modern Web DAY 1

技術 [DAY01] 進入React的世界-認識什麼是React?

學習背景 個人之前有HTML,CSS,javascript的背景,因為想要更深入研究網頁前端的技術,所以選擇了這個題目,雖然還不清楚自己是否可以順利完成30天的...