iT邦幫忙

網頁設計相關文章
共有 840 則文章
0 Like 0 留言 13084 瀏覽

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

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

wanjan_chen ‧ 2022-06-01
2 Like 1 留言 1701 瀏覽
鐵人賽 Modern Web DAY 30
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 30 篇

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

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

烙詩 ‧ 2021-10-14 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1405 瀏覽
鐵人賽 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 留言 1282 瀏覽
鐵人賽 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 留言 1202 瀏覽
鐵人賽 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 留言 1553 瀏覽
鐵人賽 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 留言 6853 瀏覽
鐵人賽 Modern Web DAY 24
快搭上姐姐的`微`前端便車 系列 第 24 篇

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

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

切版姐姐 ‧ 2021-10-09
1 Like 0 留言 4188 瀏覽
鐵人賽 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 留言 1224 瀏覽
鐵人賽 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 留言 1109 瀏覽
鐵人賽 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 留言 1287 瀏覽
鐵人賽 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 留言 1131 瀏覽
鐵人賽 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 留言 8078 瀏覽
鐵人賽 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 留言 1603 瀏覽
鐵人賽 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 留言 3563 瀏覽
鐵人賽 Modern Web DAY 18
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 18 篇

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

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

烙詩 ‧ 2021-10-02 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
0 Like 0 留言 6228 瀏覽
鐵人賽 Modern Web DAY 16
快搭上姐姐的`微`前端便車 系列 第 16 篇

技術 第16車廂-提示我一下嘛！bootstrap-tooltip應用篇

昨篇已介紹data-*基本介紹，這篇介紹data於bootstrap上的使用 關於提示框，其實工作上真的會用到，但以前都用手刻，沒仔細看bootstrap居...

切版姐姐 ‧ 2021-10-01
1 Like 0 留言 1858 瀏覽
鐵人賽 Modern Web DAY 17
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 17 篇

技術 【設計+切版30天實作】｜Day17 - Bootstrap的環境建立

大綱 要切版前當然是要先來建立環境，所以我們下一篇再來做客製化！那環境要怎麼建立？其實還蠻簡單的！只要跟著下面的步驟去做，很快就會上手啦！不過先說明一下，這篇文...

烙詩 ‧ 2021-10-01 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1568 瀏覽
鐵人賽 Modern Web DAY 16
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 16 篇

技術 【設計+切版30天實作】｜Day16 - 進入切版前的前置作業之列出設計稿上的數據

大綱 前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷...

烙詩 ‧ 2021-09-30 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 2 留言 21249 瀏覽
鐵人賽 Modern Web DAY 13
快搭上姐姐的`微`前端便車 系列 第 13 篇

技術 第13車廂-table界的神器!DataTables介紹篇(3)

本篇要延續DataTables介紹，如何引用拓展包呈現響應式版本 好心建議要先看: 第11車廂-table界的神器!DataTables介紹篇(1)...

切版姐姐 ‧ 2021-09-28
1 Like 0 留言 1338 瀏覽
鐵人賽 Modern Web DAY 15
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 15 篇

技術 【設計+切版30天實作】｜Day15 - 來個完美的簡約風Footer結束這回合

設計大綱 Landing Page的主要色都偏深色，另外CTA也有用主要色作為背景顏色了，所以這邊的Footer就決定用淺色的Secondary-color來作...

烙詩 ‧ 2021-09-29 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1152 瀏覽
鐵人賽 Modern Web DAY 14
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 14 篇

技術 【設計+切版30天實作】｜Day14 - 簡約CTA的用處及設計的注意事項

設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然，另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...

烙詩 ‧ 2021-09-28 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1186 瀏覽
鐵人賽 Modern Web DAY 13
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 13 篇

技術 【設計+切版30天實作】｜Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形＋背景顏色＋陰影。今天想來做點不一樣的，所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...

烙詩 ‧ 2021-09-27 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 20033 瀏覽
鐵人賽 Modern Web DAY 12
快搭上姐姐的`微`前端便車 系列 第 12 篇

技術 第12車廂-table界的神器!DataTables介紹篇(2)

延續上篇<第11車廂-table界的神器!DataTables介紹篇(1)>，今日再介紹其他參數設定 好的!延續上篇<第11車廂-tabl...

切版姐姐 ‧ 2021-09-27
2 Like 0 留言 1137 瀏覽
鐵人賽 Modern Web DAY 12
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 12 篇

技術 【設計+切版30天實作】｜Day12 - 怎麼讓使用者選中您想要他選的Plans設計？

設計大綱 今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用...

烙詩 ‧ 2021-09-26 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1315 瀏覽
鐵人賽 Modern Web DAY 11
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 11 篇

技術 【設計+切版30天實作】｜Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢？

設計大綱 在上一篇設計「Reviews」這個區塊時，有提到切版時可能會有「切不出來」的情況發生，所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是！...

烙詩 ‧ 2021-09-25 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1396 瀏覽
鐵人賽 Modern Web DAY 10
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 10 篇

技術 【設計+切版30天實作】｜Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊

設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗，另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網，目前好像沒辦法切出超出視...

烙詩 ‧ 2021-09-24 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 2336 瀏覽
鐵人賽 Modern Web DAY 9
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 9 篇

技術 【設計+切版30天實作】｜Day9 - 把Bootstrap預設的Carousel新增變化

設計大綱 一個平台要成功，當然少不了圖片/照片的介紹（很愛看圖的懶人XD），所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。Bootstrap...

烙詩 ‧ 2021-09-23 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1062 瀏覽
鐵人賽 Modern Web DAY 8
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 8 篇

技術 【設計+切版30天實作】｜Day8 - 看起來簡單但不單調的steps設計

設計大綱 稱讚完平台的優點後，接下來的區塊就要向使用者介紹使用的流程，但因為現代人都很懶得看很冗長的「說明書」，所以使用流程會採用簡約的方式去做介紹。 因為上面...

烙詩 ‧ 2021-09-22 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 941 瀏覽
鐵人賽 Modern Web DAY 7
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 7 篇

技術 【設計+切版30天實作】｜Day7 - 設計出無外框式的三欄式pros區塊

設計大綱 上一個區塊賣完小廣告後，今天馬上就給它塞個平台的優點進來，這樣可以讓使用者有「感同身受」的感覺，同時也能讓他們覺得「哇！好像真的很棒唷！」。 「優點」...

烙詩 ‧ 2021-09-21 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 2482 瀏覽
鐵人賽 Modern Web DAY 3
30天學會HTML＋CSS，製作精美網站 系列 第 3 篇

技術 找尋你的設計靈感、素材及好工具

製作網站前，通常需要找尋相關設計靈感，有時候想破頭就是沒想法，素材對網頁內容來說很重要，好不容易找到了不錯的素材，大部分都是有著作權，不能直接使用，以下是我常逛...

原來可以這樣做 | Sunny ‧ 2021-09-18
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
8254 篇
完賽人數
92 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 17th鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙