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

0 Like 0 留言 188 瀏覽

鐵人賽 Modern Web DAY 16

轉生成前端工程師後，30步離開新手村！系列第 16 篇

技術 # 前端實作案例分享: Flex Box應用

提問: 有一個header，裡面有A，B兩個區塊，A是固定寬或是固定比例，B是動態寬度隨內容而定。今天客戶希望B在字數少一點的時候必須要置中對齊，字數多的時候...

艾瑞卡 ‧ 2024-09-30

0 Like 0 留言 881 瀏覽

技術 CSS 特殊形狀怎麼切?

我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...

axekk121217 ‧ 2023-10-26

0 Like 0 留言 573 瀏覽

鐵人賽 Modern Web DAY 19

連我阿公都會-手把手教你架網站系列第 19 篇

技術【Day19】常見切版應用（3-1）頁頂Header實作

在介紹完了前兩日的可滑動選單與彈跳視窗後，今天我們將要進入 ── 頁頂Header的實作。 header的詳細作用和規劃在我們的前導：《網頁的基礎設計理論》已有...

ttdragon0722 ‧ 2023-10-04 ‧團隊最強資工大電神

0 Like 0 留言 874 瀏覽

鐵人賽 Modern Web DAY 18

連我阿公都會-手把手教你架網站系列第 18 篇

技術【Day18】常見切版應用（2）彈跳視窗

您在瀏覽其他網站時，是否常常被突如其來的彈跳視窗惹到心煩呢？不論是廣告、強迫訂閱、最新資訊…等，網頁常常使用彈跳視窗來宣傳。雖然惱人，但無法否認使用者確實被吸引...

ttdragon0722 ‧ 2023-10-03 ‧團隊最強資工大電神

0 Like 1 留言 1020 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

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

0 Like 1 留言 1496 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

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

0 Like 0 留言 1539 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

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

1 Like 0 留言 804 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

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

0 Like 0 留言 789 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

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

0 Like 0 留言 1665 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 [DAY25]網頁切版入門及版面實作_對話框&三角形

對話框&三角形在這個範例中要練習對話框的接版，以及如何用css繪製出三角形整理幾個重點: 1.將對話框dialog_box寬度設為960px，添加背...

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

0 Like 0 留言 843 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 [DAY24]網頁切版入門及版面實作_ 序號項目

序號項目在這個範例中要練習序號項目的切版整理幾個小重點如下方： 1.font-size調整文字大小，font-weight調整文字厚度，line-heigh...

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

0 Like 0 留言 919 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 [DAY23]網頁切版入門及版面實作_ 價格表

價格表在這個範例中要練習價格表切版整理幾個重點:1.將section_price設為滿版2.container，做為固定欄寬1200px的區塊，並設定dis...

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

0 Like 0 留言 1251 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

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

0 Like 0 留言 749 瀏覽

鐵人賽 Modern Web DAY 21

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

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

卡片版面6 在這個範例中要練習卡片版面的切版整理幾個小重點如下方： 1.將section設為滿版，添加背景色#ffc6c62.container，做為固定欄寬...

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

0 Like 1 留言 865 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

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

0 Like 0 留言 814 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

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

0 Like 0 留言 713 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

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

0 Like 0 留言 1025 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

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

0 Like 0 留言 928 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

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

0 Like 0 留言 908 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

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

1 Like 1 留言 1326 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

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

0 Like 1 留言 1638 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

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

0 Like 0 留言 999 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

1 Like 1 留言 3155 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

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

0 Like 0 留言 982 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

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

0 Like 1 留言 957 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

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

0 Like 1 留言 1023 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

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

0 Like 0 留言 983 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 [DAY7]網頁切版入門及版面實作_按鈕效果

按鈕效果(before、after) 在網頁中，可以看到常常游標移動到按鈕的時候，通常都會有變化，讓使用者知道游標有確實的接觸到，今天就要來練習這個效果整...

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

0 Like 0 留言 934 瀏覽

鐵人賽 Modern Web DAY 6

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

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

圖文版面1 今天要練習最上方主BANNER的切版整理幾個小重點如下方： 1.將section_kv設為滿版，添加背景色#FFEBF22.添加一個contain...

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

0 Like 1 留言 1642 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 [DAY5]網頁切版入門及版面實作_範例版面介紹

範例版面在接下來的幾天主要練習下方圖片的切版，規劃了較為簡單的基礎版面，在開始執行切板之前可以先稍微規劃一下要使用的class name以及切版方式，可以協助...

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