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

4 Like 0 留言 954 瀏覽

鐵人賽 Modern Web DAY 7

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

技術【Day07】內容長度 - 過短的內容

情境決定畫面的平衡有許多要考慮的因素，除了過長的內容會造成畫面破版之外，反過來，如果過短的內容是不是也會造成視覺上的不協調呢？你能看見多遠的未來呢？看看下...

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

0 Like 0 留言 395 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 {Day5} 小公主訂單網頁嘗試集＿第五集＿網頁標題建立＋icon

小公主頻道邁入第五天ㄌ當進入網頁映入眼簾的最上方，就是我們的標題，言簡意賅的標題對任何網站來說都十分重要，畢竟在分頁海裡，一目瞭然的找到想要的分頁，精確的標題...

icetong ‧ 2022-09-20

6 Like 0 留言 1395 瀏覽

鐵人賽 Modern Web DAY 6

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

技術【Day06】內容長度 - 過長的內容

情境我們用下面這個垂直下拉選單來說明這個情境：上圖示我們常見的下拉選單形式，這些選單有一些選項，例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...

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

0 Like 0 留言 485 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 {Day4} 小公主訂單網頁嘗試集＿第四集＿html 打出第一行

又到了憂鬱星期一，歡迎回到小公主頻道！前幾天解說了前後端、html一些寫程式前的概念解說，說了那麼多廢話（沒），終於要開始寫程式了（痛哭流涕），大家準備好了ㄇ！...

icetong ‧ 2022-09-19

5 Like 0 留言 1234 瀏覽

鐵人賽 Modern Web DAY 5

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

技術【Day05】內容長度 - 類別標籤

情境如下圖，網站中有這樣一塊又一塊的圖形設計，稱之為「卡片」。近年來卡片式設計在網站上越來越常見。矩形的卡片設計能夠順利的與不同視窗大小做搭配，因此無論...

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

0 Like 0 留言 572 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 {Day3} 小公主訂單網頁嘗試集＿第三集＿淺談html簡介

建構網頁最初階的一定就是html...不過html其實不是真正的程式語言，而是所謂的標記語言！那什麼是標記語言….？標記語言通常用於處理文本相關信息，能依照不...

icetong ‧ 2022-09-18

4 Like 2 留言 3578 瀏覽

鐵人賽 Modern Web DAY 4

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

技術【Day04】間距 - 元件間的間距

間距、間距、間距！情境在討論今天的主題之前，我們先來看看下面這張圖：第一張圖的情境，有可能是在介面上我們試圖要做一些不可逆的操作，例如你要去刪除某篇文章...

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

0 Like 0 留言 440 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 {Day2} 小公主訂單網頁嘗試集＿第二集＿前（後）端微講解

歡迎光臨小公主嘗試集＿第二集即將開始展開程式前端之旅…..等等所以什麼是前端ㄚ好的小公主說書時間到！網頁設計大致可分為前端、後端前端通常可以使用的語言為ht...

icetong ‧ 2022-09-17

7 Like 0 留言 1823 瀏覽

鐵人賽 Modern Web DAY 3

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

技術【Day03】間距 - 標題與圖示

情境今天我們來討論一個常見的設計，標題與圖示。下面這是一張很常見的卡片式設計，看起來很正常不是嗎？我們在生活當中很常遇到類似這樣的設計，就是在一個卡片式的...

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

0 Like 0 留言 529 瀏覽

鐵人賽自我挑戰組 DAY 1

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 1 篇

技術 Day 1 環境建置

前言像我這樣一個對程式語言，一無所知卻試圖想要進來這樣一個領域的初學者來說腦袋畫面閃過的不外乎寫程式的就像是電影裡面打字噠噠噠很快速的駭客好像咻咻咻幾分鐘...

candy82202 ‧ 2022-09-16

0 Like 0 留言 430 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 {Day1} 歡迎光臨小公主＿訂單嘗試集第一集（開播囉！）

大家好，我是小公主~(≧▽≦)/~就讀大三理工相關科系的廢物千金小公主，也是個有個創業夢想的小公主（有夢最美），期待自己可以除了推廣企業核心和創新應用外，也想在...

icetong ‧ 2022-09-16

0 Like 0 留言 738 瀏覽

鐵人賽自我挑戰組 DAY 1

網路的架構&各種應用系列第 1 篇

技術 Day1 - 前言

(先來個開場白幹話)網路大家每天都在使用，可以隨時方便地到達各個網站搜尋或是購買各種需要的東西，但這個每天幾乎無時無刻使用的工具，你真的知道他背後的運作原理嗎...

bernice123 ‧ 2022-09-11

1 Like 0 留言 1698 瀏覽

技術修改 HTML 標籤文字? 插入 HTML 子標籤?

以下分享幾種常見修改HTML標籤內容的方式，依照不同需求，我把自己會的修改方式分成兩大類，分別是針對標籤修改內部文字和在標籤內插入子標籤兩大類。假設我們現...

Xiang1009 ‧ 2022-08-12

4 Like 0 留言 2056 瀏覽

技術網站架設如何開始? 網域購買+網頁設計+虛擬主機租用

網站架設網站架設其實就是這三步驟: 網域註冊 ➞ 網頁設計 ➞ 主機空間租用，網站架設看似簡單，但其實每個步驟都需經歷各種怎麼做才有助於網站經營的考量.......

yumili ‧ 2022-07-23

1 Like 0 留言 1378 瀏覽

技術比 WordPress 還簡單的自架站工具推薦 – 免寫網頁程式虛擬主機+網頁設計

不會網頁程式還可以自架網站嗎? 網站架設其實只有3個步驟:網域註冊 → 網頁設計 → 租用網站主機，看似簡單，實際做起來卻很難! 對於想要自架網站或低成本架站，...

yumili ‧ 2022-07-02

0 Like 0 留言 9208 瀏覽

技術 favicon.ico-網站logo的製作與使用

我們在開啟google或是iT邦等網站時，都可以在分頁頁籤或書籤左側，看到它們專屬的小圖示，這個小圖示就是favicon。要如何製作favicon.ico呢？...

wanjan_chen ‧ 2022-06-01

2 Like 1 留言 1173 瀏覽

鐵人賽 Modern Web DAY 30

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 30 篇

技術【設計+切版30天實作】｜Day30 - 最後一天了嗚嗚嗚的30天參賽心得

感人時刻今天是鐵人賽30天的最後一天了，有種「嗯？30天了喔？」的奇妙感覺！畢竟已經習慣每天上來發文，也習慣隊友們每天互相提(恐)醒(嚇)發文!!! 突然有點...

烙詩 ‧ 2021-10-14 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 1087 瀏覽

鐵人賽 Modern Web DAY 29

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 29 篇

技術【設計+切版30天實作】｜Day29 - Footer區塊 - 切出最後一步，看似不起眼但必須存在的footer

前面完成了「CTA」區塊，今天來完成「Footer」的區塊。數據收集 Footer的樣式 Background-color：$Secondary...

烙詩 ‧ 2021-10-13 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2 Like 1 留言 735 瀏覽

鐵人賽 Modern Web DAY 28

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 28 篇

技術【設計+切版30天實作】｜Day28 - CTA區塊 - 超快速切出簡約CTA，讓使用者註冊起來！！

前面完成了「Plans」區塊，今天來完成「CTA」的區塊。數據收集 CTA的樣式 Background-color：$Primary Pad...

烙詩 ‧ 2021-10-12 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 856 瀏覽

鐵人賽 Modern Web DAY 27

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 27 篇

技術【設計+切版30天實作】｜Day27 - Plans區塊 - 怎麼做出背景陰影？原來陰影還可以調數據！

前面完成了「Reviews」區塊，今天來完成「Plans」的區塊。數據收集標題的樣式 Font-weight：Bold Font-size：3...

烙詩 ‧ 2021-10-11 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2 Like 0 留言 1057 瀏覽

鐵人賽 Modern Web DAY 26

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 26 篇

技術【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

前面完成了「Carousel」區塊，今天來完成「Reviews」的區塊。數據收集 card 標題的樣式 Font-weight：Regular F...

烙詩 ‧ 2021-10-10 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2 Like 0 留言 3882 瀏覽

鐵人賽 Modern Web DAY 24

快搭上姐姐的`微`前端便車系列第 24 篇

技術第24車廂-翻起來惹!頁面翻頁效果turn.js應用篇

本篇介紹可實現翻頁效果的turn.js基本參數及基本用法 :哈囉!:(叫誰?):叫你啦!:喔。怎?:不知道你會不會有這樣的需求?要你做一個像是電子書可以翻頁...

切版姐姐 ‧ 2021-10-09

1 Like 0 留言 2912 瀏覽

鐵人賽 Modern Web DAY 25

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 25 篇

技術【設計+切版30天實作】｜Day25 - Carousel區塊 - 把Carousel Caption和Indicators改成心目中理想的模樣

前面完成了「Steps」區塊，今天來完成「Carousel」的區塊。數據收集 margin-top : 96px Carousel底下Backg...

烙詩 ‧ 2021-10-09 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 848 瀏覽

鐵人賽 Modern Web DAY 24

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 24 篇

技術【設計+切版30天實作】｜Day24 - Steps區塊 - 如何做出漸層背景？

前面完成了「Pros」區塊，今天來完成「Steps」的區塊。數據收集標題的樣式 Font-weight：Medium Font-size：24p...

烙詩 ‧ 2021-10-08 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 645 瀏覽

鐵人賽 Modern Web DAY 23

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 23 篇

技術【設計+切版30天實作】｜Day23 - Pros區塊 - 看似無邊框的三欄式卡片，到底要對準哪條欄位？

前面完成了小廣告區塊，今天來完成「平台好處 - pros」的區塊。數據收集 card標題的樣式 Font-weight：Bold Font-siz...

烙詩 ‧ 2021-10-07 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2 Like 0 留言 902 瀏覽

鐵人賽 Modern Web DAY 22

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 22 篇

技術【設計+切版30天實作】｜Day22 - 設計小廣告 - 背景上又有背景到底怎麼切！

前面完成了「PainPoints」，今天來完成這一塊「小廣告」的區塊。數據收集 Content標題的樣式 Font-weight：Bold Fon...

烙詩 ‧ 2021-10-06 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 879 瀏覽

鐵人賽 Modern Web DAY 21

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 21 篇

技術【設計+切版30天實作】｜Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱昨天完成header的部分了，所以接下來就會進入main的部分，今天要完成的是「PainPoints」的區塊。（如下圖）數據收集標題的樣式 F...

烙詩 ‧ 2021-10-05 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 4911 瀏覽

鐵人賽 Modern Web DAY 20

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 20 篇

技術【設計+切版30天實作】｜Day20 - Navigation bar - 打破預設的navbar排版

大綱昨天完成了header的下半部分，今天的任務就要來完成header的上半部分 —— Navigation bar！廢話不多說，馬上開始吧！數據收集 n...

烙詩 ‧ 2021-10-04 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 1061 瀏覽

鐵人賽 Modern Web DAY 19

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 19 篇

技術【設計+切版30天實作】｜Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader？

大綱前半段都在設計，今天開始就要進行切版了！(緊張!!!)那我們header的部分分成heroheader和navbar，今天的任務是切「Heroheader...

烙詩 ‧ 2021-10-03 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

1 Like 0 留言 2277 瀏覽

鐵人賽 Modern Web DAY 18

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列第 18 篇

技術【設計+切版30天實作】｜Day18 - Bootstrap的客製化

大綱上一篇把環境都建立完成後，今天要來做客製化，但在這之前，先來說明一下為什麼要客製化，以及為什麼會把客製化放在前面。由於這一次的挑戰是以設計師角度去做，因...

烙詩 ‧ 2021-10-02 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

技術 【Day07】內容長度 - 過短的內容

技術 {Day5} 小公主訂單網頁嘗試集＿第五集＿網頁標題建立＋icon

技術 【Day06】內容長度 - 過長的內容

技術 {Day4} 小公主訂單網頁嘗試集＿第四集＿html 打出第一行

技術 【Day05】內容長度 - 類別標籤

技術 {Day3} 小公主訂單網頁嘗試集＿第三集＿淺談html簡介

技術 【Day04】間距 - 元件間的間距

技術 {Day2} 小公主訂單網頁嘗試集＿第二集＿前（後）端微講解

技術 【Day03】間距 - 標題與圖示

技術 Day 1 環境建置

技術 {Day1} 歡迎光臨小公主＿訂單嘗試集第一集（開播囉！）

技術 Day1 - 前言

技術 修改 HTML 標籤文字? 插入 HTML 子標籤?

技術 網站架設如何開始? 網域購買+網頁設計+虛擬主機租用

技術 比 WordPress 還簡單的自架站工具推薦 – 免寫網頁程式 虛擬主機+網頁設計

技術 favicon.ico-網站logo的製作與使用

技術 【設計+切版30天實作】｜Day30 - 最後一天了嗚嗚嗚的30天參賽心得

技術 【設計+切版30天實作】｜Day29 - Footer區塊 - 切出最後一步，看似不起眼但必須存在的footer

技術 【設計+切版30天實作】｜Day28 - CTA區塊 - 超快速切出簡約CTA，讓使用者註冊起來！！

技術 【設計+切版30天實作】｜Day27 - Plans區塊 - 怎麼做出背景陰影？原來陰影還可以調數據！

技術 【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

技術 第24車廂-翻起來惹!頁面翻頁效果turn.js應用篇

技術 【設計+切版30天實作】｜Day25 - Carousel區塊 - 把Carousel Caption和Indicators改成心目中理想的模樣

技術 【設計+切版30天實作】｜Day24 - Steps區塊 - 如何做出漸層背景？

技術 【設計+切版30天實作】｜Day23 - Pros區塊 - 看似無邊框的三欄式卡片，到底要對準哪條欄位？

技術 【設計+切版30天實作】｜Day22 - 設計小廣告 - 背景上又有背景到底怎麼切！

技術 【設計+切版30天實作】｜Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

技術 【設計+切版30天實作】｜Day20 - Navigation bar - 打破預設的navbar排版

技術 【設計+切版30天實作】｜Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader？

技術 【設計+切版30天實作】｜Day18 - Bootstrap的客製化

標記使用者