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

5 Like 0 留言 2082 瀏覽

鐵人賽 Modern Web DAY 9

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

技術【Day09】內容長度 - 固定的寬度

情境在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個...

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

0 Like 0 留言 552 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 {Day7} 小公主訂單網頁嘗試集＿第七集＿建立表格

鐵人賽邁入第七天，終於一個禮拜了，好感動！相信有了文字也有圖片，可以產出圖文並茂的網頁，不過還是少不了些格式化的基本工具，像是….表格！表格可以輕鬆清楚的規...

icetong ‧ 2022-09-22

6 Like 1 留言 2236 瀏覽

鐵人賽 Modern Web DAY 8

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

技術【Day08】內容長度 - 固定的高度

情境不知道大家有沒有設計過官網或是活動頁的經驗呢？主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面，其目的是要提出一個該網站最重要...

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

0 Like 0 留言 643 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 {Day6} 小公主訂單網頁嘗試集＿第六集＿圖片插入＋大小調整

結束標題後，我們可以來到網頁主視覺的部分好的圖片，好的網頁，才能吸引消費者的興趣！人是視覺動物，第一眼給閱聽者的感官刺激決定了他會不會繼續瀏覽下去甚至按下購買...

icetong ‧ 2022-09-21

4 Like 0 留言 1531 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

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

6 Like 0 留言 2183 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

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

0 Like 0 留言 669 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

icetong ‧ 2022-09-20

0 Like 0 留言 756 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

icetong ‧ 2022-09-19

5 Like 0 留言 1928 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

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

4 Like 2 留言 5509 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

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

0 Like 0 留言 1001 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

icetong ‧ 2022-09-18

9 Like 0 留言 2565 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

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

0 Like 0 留言 647 瀏覽

鐵人賽 Modern Web DAY 2

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

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

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

icetong ‧ 2022-09-17

0 Like 0 留言 889 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Day 1 環境建置

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

candy82202 ‧ 2022-09-16

0 Like 0 留言 671 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

icetong ‧ 2022-09-16

0 Like 0 留言 856 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 [DAY18]網頁切版入門及版面實作_ 卡片版面3

卡片版面3 在這個範例中要練習卡片版面的切版整理幾個小重點如下方： 1.將section設為滿版2.在container設定display: flex讓資料橫...

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

0 Like 0 留言 1187 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 [DAY17]網頁切版入門及版面實作_ 卡片版面2

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

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

0 Like 0 留言 1131 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 [DAY16]網頁切版入門及版面實作_ 卡片版面1

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

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

0 Like 0 留言 1172 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 [DAY15]網頁切版入門及版面實作_ Font Awesome

如何使用 Font Awesome 在網頁設計的同時，可以看到需要使用大量的icon，當我們網站要放入一些比較複雜的icon設計圖示，但沒有設計師幫我們產出時，...

ruhui0726 ‧ 2022-09-30 ‧團隊蝦兵蟹將

1 Like 1 留言 1663 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 [DAY14]網頁切版入門及版面實作_ 合體

合體版面今天要將DAY6~DAY13所練習的所有版面合體起來，變成一個完整的頁面結束完這個完整個範例後，接下來的這幾天，每天會提供一個比較常見的範例一起練習...

ruhui0726 ‧ 2022-09-29 ‧團隊蝦兵蟹將

0 Like 1 留言 2256 瀏覽

鐵人賽 Modern Web DAY 13

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

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

導覽列在這個範例中要練習導覽列區塊的切版整理幾個重點:1.將section_kv設為滿版，添加屬性position: fixed (固定定位)，將導覽列的區...

ruhui0726 ‧ 2022-09-28 ‧團隊蝦兵蟹將

0 Like 0 留言 1150 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 [DAY12]網頁切版入門及版面實作_ 頁尾

頁尾在這個範例中要練習頁尾部分的切版整理幾個小重點如下方： 1.將footer_content設為滿版，添加背景色#FFEBF22.添加一個containe...

ruhui0726 ‧ 2022-09-27 ‧團隊蝦兵蟹將

1 Like 1 留言 3864 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 [DAY11]網頁切版入門及版面實作_浮動視窗

浮動視窗在這個範例中要練習固定的浮動視窗，類似我們常看到的側邊廣告，位置不會隨著視窗滑動而改變 1.position: fixed 使用屬性position:...

ruhui0726 ‧ 2022-09-26 ‧團隊蝦兵蟹將

0 Like 0 留言 1254 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 [DAY10]網頁切版入門及版面實作_區塊卡片2

區塊卡片2 在這個範例中要練習多個卡片的排列以及游標移至卡片後的效果整理幾個小重點如下方： 1.將section_card設為滿版2.添加一個containe...

ruhui0726 ‧ 2022-09-25 ‧團隊蝦兵蟹將

0 Like 1 留言 1126 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [DAY9]網頁切版入門及版面實作_區塊卡片1

區塊卡片今天要練習第四區塊卡片的切版整理幾個小重點如下方： 1.將section_part2設為滿版2.添加一個container，做為固定欄寬1200px...

ruhui0726 ‧ 2022-09-24 ‧團隊蝦兵蟹將

0 Like 1 留言 1216 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 [DAY8]網頁切版入門及版面實作_ 圖文版面2

圖文版面2 今天要練習第二塊跟第三塊圖文版面的部分整理幾個小重點如下方： 1.將section_melon以及section_gym設為滿版2.兩個部分都添加...

ruhui0726 ‧ 2022-09-23 ‧團隊蝦兵蟹將

0 Like 0 留言 1077 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Day1 - 前言

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

bernice123 ‧ 2022-09-11

1 Like 0 留言 2939 瀏覽

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

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

Xiang1009 ‧ 2022-08-12

4 Like 0 留言 3287 瀏覽

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

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

yumili ‧ 2022-07-23

1 Like 0 留言 1795 瀏覽

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

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

yumili ‧ 2022-07-02

技術 【Day09】內容長度 - 固定的寬度