提問: 有一個header,裡面有A,B兩個區塊,A是固定寬或是固定比例,B是動態寬度隨內容而定。今天客戶希望B在字數少一點的時候必須要置中對齊,字數多的時候...
我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...
在介紹完了前兩日的可滑動選單與彈跳視窗後,今天我們將要進入 ── 頁頂Header的實作。 header的詳細作用和規劃在我們的前導:《網頁的基礎設計理論》已有...
您在瀏覽其他網站時,是否常常被突如其來的彈跳視窗惹到心煩呢?不論是廣告、強迫訂閱、最新資訊…等,網頁常常使用彈跳視窗來宣傳。雖然惱人,但無法否認使用者確實被吸引...
電子名片 在這個範例中要練習電子名片的切版 整理幾個小重點如下方: 1.設定名片的寬高為390x240px,並導圓角15px,添加陰影box-shadow2.名...
聯絡表單 在這個範例中要練習聯絡表單的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#f3c1c52.添加一個container,做為固...
導覽列 在這個範例中要練習導覽列的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#FFEBF22.nav,做為固定欄寬1280px的區塊...
卡片版面 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section_card設為滿版2.添加一個container,做為固定欄寬1200p...
頁尾 在這個範例中要練習頁尾的切版 整理幾個小重點如下方: 1.將footer_content設為滿版,添加背景色#f3c1c52.添加一個container,...
對話框&三角形 在這個範例中要練習對話框的接版,以及如何用css繪製出三角形 整理幾個重點: 1.將對話框dialog_box寬度設為960px,添加背...
序號項目 在這個範例中要練習序號項目的切版 整理幾個小重點如下方: 1.font-size調整文字大小,font-weight調整文字厚度,line-heigh...
價格表 在這個範例中要練習價格表切版 整理幾個重點:1.將section_price設為滿版2.container,做為固定欄寬1200px的區塊,並設定dis...
圖文版面 在這個範例中要練習圖文版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊,...
卡片版面6 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#ffc6c62.container,做為固定欄寬...
卡片版面5 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
卡片版面4 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
卡片版面3 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.在container設定display: flex讓資料橫...
卡片版面2 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
卡片版面1 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
如何使用 Font Awesome 在網頁設計的同時,可以看到需要使用大量的icon,當我們網站要放入一些比較複雜的icon設計圖示,但沒有設計師幫我們產出時,...
合體版面 今天要將DAY6~DAY13所練習的所有版面合體起來,變成一個完整的頁面結束完這個完整個範例後,接下來的這幾天,每天會提供一個比較常見的範例一起練習...
導覽列 在這個範例中要練習導覽列區塊的切版 整理幾個重點:1.將section_kv設為滿版,添加屬性position: fixed (固定定位),將導覽列的區...
頁尾 在這個範例中要練習頁尾部分的切版 整理幾個小重點如下方: 1.將footer_content設為滿版,添加背景色#FFEBF22.添加一個containe...
浮動視窗 在這個範例中要練習固定的浮動視窗,類似我們常看到的側邊廣告,位置不會隨著視窗滑動而改變 1.position: fixed 使用屬性position:...
區塊卡片2 在這個範例中要練習多個卡片的排列以及游標移至卡片後的效果 整理幾個小重點如下方: 1.將section_card設為滿版2.添加一個containe...
區塊卡片 今天要練習第四區塊卡片的切版 整理幾個小重點如下方: 1.將section_part2設為滿版2.添加一個container,做為固定欄寬1200px...
圖文版面2 今天要練習第二塊跟第三塊圖文版面的部分 整理幾個小重點如下方: 1.將section_melon以及section_gym設為滿版2.兩個部分都添加...
按鈕效果(before、after) 在網頁中,可以看到常常游標移動到按鈕的時候,通常都會有變化,讓使用者知道游標有確實的接觸到,今天就要來練習這個效果 整...
圖文版面1 今天要練習最上方主BANNER的切版 整理幾個小重點如下方: 1.將section_kv設為滿版,添加背景色#FFEBF22.添加一個contain...
範例版面 在接下來的幾天主要練習下方圖片的切版,規劃了較為簡單的基礎版面,在開始執行切板之前可以先稍微規劃一下要使用的class name以及切版方式,可以協助...