iT邦幫忙

網頁切版相關文章
共有 43 則文章

技術 CSS 特殊形狀怎麼切?

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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