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

2 Like 3 留言 3044 瀏覽

技術六角學院2020春季切版直播班-課後心得

這周來寫點不一樣的~ 因為終於上完八週的線上切版直播班啦~~!!! 來寫寫課後心得，可供日後想參加的學員參考哦:) 參加源由如果看過我前面的文章會知道我原本是...

a841722 ‧ 2020-05-31

2 Like 1 留言 3043 瀏覽

鐵人賽 Modern Web DAY 23

完美 Camp 進化論系列第 23 篇

技術好想工作室 web camp 切版怎麼 training (一)

警語!!照著 Kata 練習，會遇到許多的困難。我會在這盡可能的把 Kata 講清楚，但是不保證照練就成功。我剛進來時的切版 KATA 是這樣我剛接觸...

Chris ‧ 2020-10-08 ‧團隊好想工作室 v4.0

1 Like 1 留言 2546 瀏覽

技術 2020網頁切版直播班-心得

前言今年四月離了職，開始了調光freelancer和轉職計畫...這個決定已經前前後後思考了一年，畢竟要從一個熟悉的環境離開真的有滿滿的未知和恐懼。在思考轉職...

leepiny ‧ 2021-01-02

1 Like 1 留言 2502 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

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

2 Like 1 留言 2384 瀏覽

鐵人賽自我挑戰組 DAY 5

前端史萊姆與Vue的三十天時光冒險系列第 5 篇

技術 Day5 切版任務(一)：基本框架

本文同步同步發佈於斜槓女指部落格：切版任務(一)：基本框架採用設計：設計師Miss_Y的旅館預約服務設計稿這次時光屋九週挑戰大部分的設計師都是採用...

鍾小呆 ‧ 2019-09-20

0 Like 0 留言 1865 瀏覽

鐵人賽 Modern Web DAY 2

關於 UI 元件你所該知道的事系列第 2 篇

技術 Day 02 - 行前說明 — 網頁微切版架構和 UI 元件

作為正式開始的第一篇要來講的是很基礎的網頁切版和怎麼去看網頁中有哪些元件，會分兩部分：網頁微切版架構：讓還不太熟網頁的人理解一般網頁 UI 的架構大概會怎麼...

parkerhiphop027 ‧ 2021-09-17

3 Like 2 留言 1760 瀏覽

鐵人賽 Modern Web DAY 24

完美 Camp 進化論系列第 24 篇

技術好想工作室 web camp 切版怎麼 training (二)

在前一篇，介紹了使用 code review 的方式進行互評。讓每個學員之間有充份的交流，並且在交流之後再做一次練習，讓別人的經驗與建議，再經過一次的實作，化為...

Chris ‧ 2020-10-09 ‧團隊好想工作室 v4.0

5 Like 0 留言 1699 瀏覽

鐵人賽影片教學 DAY 27

金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎系列第 27 篇

技術金魚都能懂的這個網頁畫面怎麼切 : 文字排版-完結

大家好～我是 Amos，這次要跟大家分享的是切版的教學，如果您本身對於 HTML & CSS 的基礎還不了解的話，建議您可以先看去年鐵人的基礎教學金魚...

CSScoke ‧ 2019-10-12 ‧團隊Amos的推坑教2.0

0 Like 1 留言 1374 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

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

0 Like 1 留言 1336 瀏覽

鐵人賽 Modern Web DAY 5

33歲轉職者的前端筆記系列第 5 篇

技術 33歲轉職者的前端筆記-DAY 5 登入畫面切版實作

第五天的文章就來談談工作上學習到的切版畫面首先一樣附上範例圖：這是常見的登入會員或是加入會員的頁面為了讓文字及區塊內容畫面一致，所以這次來學著用 tab...

a841722 ‧ 2021-09-05

2 Like 0 留言 1336 瀏覽

鐵人賽 Modern Web DAY 25

完美 Camp 進化論系列第 25 篇

技術好想工作室 web camp 切版怎麼 training (三)

在前一篇，介紹了使用 code review 的方式進行互評。讓每個學員之間有充份的交流，並且在交流之後再做一次練習，讓別人的經驗與建議，再經過一次的實作，化為...

Chris ‧ 2020-10-10 ‧團隊好想工作室 v4.0

0 Like 1 留言 1296 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

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

0 Like 0 留言 1274 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

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

0 Like 1 留言 1274 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

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

0 Like 0 留言 1264 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

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

1 Like 1 留言 1131 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

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

0 Like 1 留言 1017 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [DAY3]網頁切版入門及版面實作_CSS介紹

CSS引入方式有以下四種方式可以在HTML中引入 CSS。 1.內聯方式內聯方式指的是直接在HTML標籤中的style屬性中添加CSS。 <div s...

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

0 Like 2 留言 1000 瀏覽

技術 [鼠年全馬鐵人挑戰] Week 6-網頁排版筆記: 在好的作品中看見未來

每每看別人編排的設計頁面好美，常常羨慕不已，好希望也能夠排出這樣的版面。之前非常多的時間在排版上周旋，心中沒有一把尺，容易陷在怎麼都排不好看的深淵當中。為什...

Dy.H ‧ 2020-04-15

1 Like 0 留言 980 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 [DAY1]網頁切版入門及版面實作_前言

前言哈囉~我是一位平面設計師，相信現在很多平面設計師常常被要求需要會一堆技能，起初只要會adobe illustrator、photoshop，現在還希望你會...

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

0 Like 0 留言 972 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

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

0 Like 1 留言 873 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

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

0 Like 0 留言 871 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

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

1 Like 0 留言 853 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 [DAY2]網頁切版入門及版面實作_html介紹

基本概念基本的網頁是由 HTML、CSS 與 JavaScript 所組成 HTML 負責建構網頁的內容及基本架構 CSS 專門負責美化網頁的任務 Java...

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

0 Like 1 留言 847 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

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

0 Like 0 留言 844 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

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

0 Like 0 留言 821 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

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

0 Like 0 留言 808 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

0 Like 1 留言 801 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

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

0 Like 0 留言 797 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

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

0 Like 0 留言 776 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

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

技術 六角學院2020春季切版直播班-課後心得

技術 好想工作室 web camp 切版怎麼 training (一)