iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 1 留言 2925 瀏覽

技術【前端動手玩創意】google五星評分的星星(2)

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

Oo_花之舞__oO ‧ 2023-03-22

1 Like 0 留言 1585 瀏覽

技術 JS筆記-製作copy效果

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

Oo_花之舞__oO ‧ 2023-03-17

1 Like 1 留言 896 瀏覽

技術 CSS濾鏡生成器:輕鬆製作網頁圖示上色效果

隨著網頁設計的發展，圖示上色效果已成為許多網站和應用程式中不可或缺的元素之一。然而，手動編輯每個圖示的色彩是一個繁瑣的任務，因此我進行了一些搜尋製作了這個CSS...

毛哥EM ‧ 2023-03-13

0 Like 0 留言 1089 瀏覽

技術 SVG 自學微筆記(04) - 繪製多邊形、折線

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG : 多邊形 (僅列出部分有使用到的屬性) <svg>&lt...

Xiang1009 ‧ 2023-05-18

1 Like 0 留言 1235 瀏覽

技術 SVG 自學微筆記(03) - 繪製圓形、橢圓形 & 線段

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料這篇筆記使用到的圖形屬性，基本上都跟矩形那篇差不多。 SVG : 圓形 (僅列出部...

Xiang1009 ‧ 2023-05-14

1 Like 0 留言 1252 瀏覽

技術 SVG 自學微筆記(02) - 繪製矩形 & 補充說明

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料前置 : 開發環境在開始畫SVG圖形前，需要先建好開發環境，以下是我的配置 :...

Xiang1009 ‧ 2023-05-12

2 Like 0 留言 1065 瀏覽

技術 SVG 自學微筆記(01) - 初步認識 SVG

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料關於 SVG SVG 全名為 Scalable Vector Graphics 即...

Xiang1009 ‧ 2023-05-09

1 Like 2 留言 1673 瀏覽

鐵人賽 Modern Web DAY 30

防禦性 CSS - 建立「防患未然」的匠人心態系列第 30 篇

技術【Day30】完賽心得

就算已經參加過兩屆了，到了這一天還是會有「天啊，沒想到我終於走到終點了啊！」的感覺。如果有讀過我的「Day01 參賽前言」的讀者就會知道，我今年絕對擁有一...

Taiming ‧ 2022-10-14 ‧團隊光明頂

2 Like 0 留言 3228 瀏覽

鐵人賽 Modern Web DAY 29

防禦性 CSS - 建立「防患未然」的匠人心態系列第 29 篇

技術【Day29】CSS 語法 - 失效的 z-index

情境 z-index 可以幫助我們決定當元素重疊的時候，誰在上面，誰在下面。那我們該如何使用 z-index 呢？首先，因為 z-index 只用於「重疊」的...

Taiming ‧ 2022-10-13 ‧團隊光明頂

2 Like 0 留言 9655 瀏覽

鐵人賽 Modern Web DAY 28

防禦性 CSS - 建立「防患未然」的匠人心態系列第 28 篇

技術【Day28】CSS 語法 - 隱藏網頁上的元件

情境有時候我們會需要隱藏網頁上的元件。舉幾個例子來說，例如我們為了使用者體驗的目的，我們希望在某某情境下，某些按鈕不要被使用者誤觸，或是為了畫面上排版的簡潔...

Taiming ‧ 2022-10-12 ‧團隊光明頂

0 Like 0 留言 695 瀏覽

鐵人賽 Modern Web DAY 26

訂單網頁嘗試集系列第 26 篇

技術 {Day26} 小公主訂單網頁嘗試集＿第二十六集＿實作伍天

喔某！竟然邁入網頁30天的最後階段！剩下五天！！！歡呼吧！各位！！雖然剛經過今年最後一個連假，不過還有四天又有週末囉！！！今日新功能：增加在頁尾回到頂端的按鈕...

icetong ‧ 2022-10-11

1 Like 0 留言 1318 瀏覽

鐵人賽 Modern Web DAY 27

防禦性 CSS - 建立「防患未然」的匠人心態系列第 27 篇

技術【Day27】CSS 語法 - 分組選擇器

情境 CSS 選擇器的分組，能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。舉個例子來說，假設我們要讓兩個元素都改變顏色，不用分組選擇器的寫法會是這樣...

Taiming ‧ 2022-10-11 ‧團隊光明頂

1 Like 1 留言 2452 瀏覽

鐵人賽 Modern Web DAY 26

防禦性 CSS - 建立「防患未然」的匠人心態系列第 26 篇

技術【Day26】元件高度 - 響應式高度設計

情境響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為...

Taiming ‧ 2022-10-10 ‧團隊光明頂

0 Like 0 留言 549 瀏覽

鐵人賽 Modern Web DAY 25

訂單網頁嘗試集系列第 25 篇

技術 {Day25} 小公主訂單網頁嘗試集＿第二十五集＿實作肆天

國慶日快樂！！！連假最後一天，似乎是難過的陰天剩下五天鐵人賽，其實也挺難過的今天想製作跑馬燈的功能，還有擴增海底世界～目標...是這樣拉新增跑馬燈html...

icetong ‧ 2022-10-10

0 Like 0 留言 627 瀏覽

鐵人賽 Modern Web DAY 24

訂單網頁嘗試集系列第 24 篇

技術 {Day24} 小公主訂單網頁嘗試集＿第二十四集＿實作參天

連假第二天，我們來點產品規格，讓消費者能更了解他們預購買的商品，那就加入一些表格吧！ html: <!DOCTYPE html> <html...

icetong ‧ 2022-10-09

1 Like 0 留言 1458 瀏覽

鐵人賽 Modern Web DAY 25

防禦性 CSS - 建立「防患未然」的匠人心態系列第 25 篇

技術【Day25】元件高度 - 步驟對話框的高度

情境步驟對話框/步驟條元件，是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣，或者有順序性，以至於不太適合一次把全部的資訊展示在一個頁面當...

Taiming ‧ 2022-10-09 ‧團隊光明頂

1 Like 0 留言 1381 瀏覽

鐵人賽 Modern Web DAY 24

防禦性 CSS - 建立「防患未然」的匠人心態系列第 24 篇

技術【Day24】Flexbox - 使用 justify-content: space-between 佈局

情境 Flexbox 是 CSS3 的盒子模型(box model)，他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...

Taiming ‧ 2022-10-08 ‧團隊光明頂

0 Like 0 留言 814 瀏覽

鐵人賽 Modern Web DAY 23

訂單網頁嘗試集系列第 23 篇

技術 {Day23} 小公主訂單網頁嘗試集＿第二十三集＿實作次天

第一天連假！希望大家玩得愉快！！小公主昨天大致上放了圖跟字，今天就建立個目錄標題！也好好把昨天的圖文稍微編輯的好看一些！新功能建立：目錄頁（含滑鼠碰到的動畫...

icetong ‧ 2022-10-08

2 Like 0 留言 2239 瀏覽

鐵人賽 Modern Web DAY 23

防禦性 CSS - 建立「防患未然」的匠人心態系列第 23 篇

技術【Day23】Grid - 使用 Sticky

情境在網頁內容很豐富的情境中，頁面上放置導覽列是很重要的功能，如下圖：假設這是一個新聞或論壇網站，左邊 aside 部分就是我們的導覽列，上面有網站的 B...

Taiming ‧ 2022-10-07 ‧團隊光明頂

0 Like 0 留言 513 瀏覽

鐵人賽 Modern Web DAY 22

訂單網頁嘗試集系列第 22 篇

技術 {Day22} 小公主訂單網頁嘗試集＿第二十二集＿實作初天

恭喜大家開了雙十連假的前端，也邁入第四週了，484特累特想睡呢～沒事的我們終於要開始結合之前用過的功能了！算是複習！首先訂購的話，要有商品圖，並讓消費者可以選...

icetong ‧ 2022-10-07

1 Like 1 留言 834 瀏覽

鐵人賽 Modern Web DAY 21

訂單網頁嘗試集系列第 21 篇

技術 {Day21} 小公主訂單網頁嘗試集＿第二十一集＿form

第三週最後一天，想讓你們學個實用ㄉ東西！表單功能！！其實表單要建立完整的話，要有前端的設計跟表格規劃，後面也要連動到後端才是完好的表單設計！but萬物都有但...

icetong ‧ 2022-10-06

1 Like 0 留言 5436 瀏覽

鐵人賽 Modern Web DAY 22

防禦性 CSS - 建立「防患未然」的匠人心態系列第 22 篇

技術【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。以下面結構為例： <div class...

Taiming ‧ 2022-10-06 ‧團隊光明頂

0 Like 0 留言 815 瀏覽

鐵人賽 Modern Web DAY 20

訂單網頁嘗試集系列第 20 篇

技術 {Day20} 小公主訂單網頁嘗試集＿第二十集＿資源介紹

今天是小公主生日！小公主想罷工！！沒就是我的vscode也突然打不開檔案，加上生日當天，只剩現在可以寫了～所以就...（罷工...喂～～）而且雖然進行到2/3...

icetong ‧ 2022-10-05

1 Like 1 留言 2072 瀏覽

鐵人賽 Modern Web DAY 21

防禦性 CSS - 建立「防患未然」的匠人心態系列第 21 篇

技術【Day21】Grid - 最小內容大小

情境談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...

Taiming ‧ 2022-10-05 ‧團隊光明頂

0 Like 0 留言 541 瀏覽

鐵人賽 Modern Web DAY 19

訂單網頁嘗試集系列第 19 篇

技術 {Day19} 小公主訂單網頁嘗試集＿第十九集＿javascript下拉式選單

今天是豔陽高照的星期二，我們前面都著重在各功能的講解與實作，好像都忘記訂單ㄌ....?所以開始介紹些訂單會使用的功能之一吧下拉式選單下拉式選單為選取數量的優...

icetong ‧ 2022-10-04

4 Like 0 留言 960 瀏覽

鐵人賽 Modern Web DAY 20

防禦性 CSS - 建立「防患未然」的匠人心態系列第 20 篇

技術【Day20】Flexbox - 最小內容大小

情境 Flexbox 的排版已經太方便，以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子，假設我們需要做一個使用者管理頁面，那我們可能...

Taiming ‧ 2022-10-04 ‧團隊光明頂

0 Like 1 留言 1233 瀏覽

鐵人賽 Modern Web DAY 30

網頁切版入門及版面實作系列第 30 篇

技術 [DAY30]網頁切版入門及版面實作_電子名片

電子名片在這個範例中要練習電子名片的切版整理幾個小重點如下方： 1.設定名片的寬高為390x240px，並導圓角15px，添加陰影box-shadow2.名...

ruhui0726 ‧ 2022-10-15 ‧團隊蝦兵蟹將

0 Like 1 留言 1735 瀏覽

鐵人賽 Modern Web DAY 29

網頁切版入門及版面實作系列第 29 篇

技術 [DAY29]網頁切版入門及版面實作_聯絡表單

聯絡表單在這個範例中要練習聯絡表單的切版整理幾個小重點如下方： 1.將section設為滿版，添加背景色#f3c1c52.添加一個container，做為固...

ruhui0726 ‧ 2022-10-14 ‧團隊蝦兵蟹將

0 Like 0 留言 2265 瀏覽

鐵人賽 Modern Web DAY 28

網頁切版入門及版面實作系列第 28 篇

技術 [DAY28]網頁切版入門及版面實作_導覽列

導覽列在這個範例中要練習導覽列的切版整理幾個小重點如下方： 1.將section設為滿版，添加背景色#FFEBF22.nav，做為固定欄寬1280px的區塊...

ruhui0726 ‧ 2022-10-13 ‧團隊蝦兵蟹將

1 Like 0 留言 1270 瀏覽

鐵人賽 Modern Web DAY 27

網頁切版入門及版面實作系列第 27 篇

技術 [DAY27]網頁切版入門及版面實作_ 卡片版面7&漸層

卡片版面在這個範例中要練習卡片版面的切版整理幾個小重點如下方： 1.將section_card設為滿版2.添加一個container，做為固定欄寬1200p...

ruhui0726 ‧ 2022-10-12 ‧團隊蝦兵蟹將

技術 【前端動手玩創意】google五星評分的星星(2)