本系列同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 參賽前言 本系列文章目標是學習 C...
目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...
電子名片 在這個範例中要練習電子名片的切版 整理幾個小重點如下方： 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的區塊...
在海賊王這部漫畫當中，有一個高人氣的反派角色，夏洛特·卡塔庫栗，他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...
卡片版面3 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.在container設定display: flex讓資料橫...
卡片版面2 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
卡片版面1 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
如何使用 Font Awesome 在網頁設計的同時，可以看到需要使用大量的icon，當我們網站要放入一些比較複雜的icon設計圖示，但沒有設計師幫我們產出時，...
參賽前言 大家好！我又來啦～～～在心裡默默下定決心，說好今年絕對死不參加，但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情，所以我又來啦 XD 相信每一位參...
合體版面 今天要將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.兩個部分都添加...
CSS是啥？全名為(Cascading Stylesheets)，谷哥中文是階層樣式表，是一種風格頁面語言(style sheet language)，能讓...
本篇介紹CSS單位，需要小心使用的觀念 單位介紹 %: 相對父層的大小比例 vw(view port width):相對於視窗的寬; vh(view p...
現在使用智慧型手機比率最高，手機畫面很小，所以在製作網頁時應注意以下細節 只顯示重要的資訊及減少欄位數量 在手機或平板上，不像電腦可以閱讀大量資訊內容，所以要適...
Eva Chen
ruhui0726
Taiming
切版姐姐
原來可以這樣做 | Sunny
iThome鐵人賽
看影片追技術