卡片版面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...
現在使用智慧型手機比率最高，手機畫面很小，所以在製作網頁時應注意以下細節 只顯示重要的資訊及減少欄位數量 在手機或平板上，不像電腦可以閱讀大量資訊內容，所以要適...
響應式網頁設計是什麼 響應式網頁設計(Responsive Web Design)簡稱RWD，是開發網頁設計中的一種方法，在不改變網站結構，隨著顯示螢幕的大小調...
transform屬性是變形的意思，可運用在2D及3D變形，可以對網頁元素做旋轉、縮放、平移、傾斜、矩陣變形的效果。但不適用於「行內元素」 transform:...
Grid是什麼 Grid是磚牆式版面，使用二維的排版方式，與flexbox不同的地方是Grid一次可以控制水平及垂直方向。Grid像是美工軟體，有許多參考線幫助...
在設計網頁時通常會加一些動畫特效，吸引使用者的目光及添加與使用者的互動性。過去製作動畫時以Flash為主，CSS3也可以建立動畫，不再只能用JavaScript...
以前排版都會使用float、display屬性的block、inline來製作，現在有了Flexbox，幾乎可以解決各種排版需求。 Flexbox是什麼 fle...
今天要來介紹的是定位(position)，可以用來設定元素的擺放位置了 position 定位 static 預設值 正常排序，依照html的code由上往下...
Box Model定義 每個html的元素都是一個Box Model，由外而內為外邊距(Margin)、邊框(Border)、內邊距(Padding)、內容盒子...
表單在網頁上有不同呈現的功能，像是網路投票、註冊、購物、問券、搜尋等，用來收集瀏覽者的資訊，增加與使用者的互動。 <form> 包含表單元素的區域(...
網頁需要製作時間表、收費表等，都可以使用表格製作。只要了解表格相關的標籤，就能夠輕鬆做出表格了，這章節會讓你了解到製作表格的多種標籤及樣式設定，還有響應式網站在...
有時候在製作區塊時，會希望用不規則的形狀呈現，以前會將圖片製作成不規則形狀，在放到html裡面，或是用很多元素堆疊呈現，但每次要修改圖片就要再重新做一次，很麻煩...
前一章節介紹過混合模式，相信對濾鏡也不會很陌生。「濾鏡」是什麼呢？他可以做出與Photoshop相同的濾鏡，CSS提供了十種濾鏡，可以用在圖片、文字...等地方...
「混合模式」是什麼呢？有用過photoshop的設計師對圖片混合模式肯定不陌生，是元素重疊部分的顏色、飽和度、亮度進行混合變成新的顏色。混合模式相關屬性： b...
圖片在網頁裡是不可或缺的元素，可以增加網站的豐富度及美感，但是也可能造成網站花太多時間載入，使用者體驗不佳，甚至影響到網站的排名。因此，圖片的解析度、檔案大小相...
項目清單分為條列式清(ol)單及編號清單(ul)，兩者的差別在於是否有自動排序項目的功能，<ul>是黑點符號「●」，在不同的瀏覽器下可能呈現不同的效...
超連結是建立網頁與網頁之間的關係，也可以連結到外部網站。a是Anchor的縮寫，中文翻譯為「錨」，點擊後跳到指定位置。連結可以是文字、圖片或檔案，當使用者滑過時...
ruhui0726
Taiming
切版姐姐
原來可以這樣做 | Sunny
iThome鐵人賽
看影片追技術