iT邦幫忙

ruhui0726
iT邦新手 4 級 ‧ 點數 345
小小設計師
7672
累計瀏覽數
站內簡訊 追蹤

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

此次挑戰主要是列出幾個常看到的版面提供給新手剛入門的人一起練習，並且自己設計了圖片跟版面切版起來會更有感覺，希望透過多反覆的實作讓自己越來越熟練。

鐵人鍊成 ｜ 共 30 篇文章 ｜ 13 人訂閱 訂閱系列文 RSS系列文 ｜團隊蝦兵蟹將
1 Like 1 留言 2981 瀏覽
DAY 11

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

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

2022-09-26 ‧ 由 ruhui0726 分享
0 Like 0 留言 969 瀏覽
DAY 12

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

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

2022-09-27 ‧ 由 ruhui0726 分享
0 Like 1 留言 1539 瀏覽
DAY 13

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

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

2022-09-28 ‧ 由 ruhui0726 分享
1 Like 1 留言 1285 瀏覽
DAY 14

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

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

2022-09-29 ‧ 由 ruhui0726 分享
0 Like 0 留言 880 瀏覽
DAY 15

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

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

2022-09-30 ‧ 由 ruhui0726 分享
0 Like 0 留言 828 瀏覽
DAY 16

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

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

2022-10-01 ‧ 由 ruhui0726 分享
0 Like 0 留言 991 瀏覽
DAY 17

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

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

2022-10-02 ‧ 由 ruhui0726 分享
0 Like 0 留言 649 瀏覽
DAY 18

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

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

2022-10-03 ‧ 由 ruhui0726 分享
0 Like 0 留言 767 瀏覽
DAY 19

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

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

2022-10-04 ‧ 由 ruhui0726 分享
0 Like 1 留言 792 瀏覽
DAY 20

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

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

2022-10-05 ‧ 由 ruhui0726 分享
ruhui0726的鐵人檔案
ruhui0726的收藏
ruhui0726的追蹤
ruhui0726的Like
ruhui0726的紀錄
ruhui0726的訂閱列表