iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

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

鐵人鍊成 | 共 30 篇文章 | 13 人訂閱 訂閱系列文 RSS系列文 團隊蝦兵蟹將
DAY 1

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

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

2022-09-16 ‧ 由 ruhui0726 分享
DAY 2

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

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

2022-09-17 ‧ 由 ruhui0726 分享
DAY 3

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

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

2022-09-18 ‧ 由 ruhui0726 分享
DAY 4

[DAY4]網頁切版入門及版面實作_CSS Reset

重置CSS的CSS樣式表 將網頁排版在各瀏覽器快速一致化,接下來的所有範例都需要使用 主要原因是每一個瀏覽器所使用的預設樣式皆不同,去呈現我們所設計的網頁外觀,...

2022-09-19 ‧ 由 ruhui0726 分享
DAY 5

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

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

2022-09-20 ‧ 由 ruhui0726 分享
DAY 6

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

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

2022-09-21 ‧ 由 ruhui0726 分享
DAY 7

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

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

2022-09-22 ‧ 由 ruhui0726 分享
DAY 8

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

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

2022-09-23 ‧ 由 ruhui0726 分享
DAY 9

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

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

2022-09-24 ‧ 由 ruhui0726 分享
DAY 10

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

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

2022-09-25 ‧ 由 ruhui0726 分享