CSS_登入頁
登入頁
HTML
Code1234567891011121314151617<div class="login"> <form class="form" action=""> <h2> ...
CSS_進度條
進度條
HTML
因為有順序關係，所以使用 ol 來做。
Code12345678<ol class="list"> <li><i class="fas fa-file" aria-hidden=" ...
CSS_聊天視窗
聊天視窗
HTML
主要區塊分成 local 跟 remote 對話端，結構都一樣。
Code123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354< ...
CSS_多層次收合側邊選單
多層次收合側邊選單
這篇結合了側邊選單製作，加上收合效果以及多層次選單。另外透過 SCSS 的階層寫法，可以比較容易了解元素間的父子關係。
HTML
用 input 跟 label 標籤來做收合按鈕，ul、li、a來做多選單結構。
ps.label 是對應 input 的標籤，可以觸發 checke ...
CSS_表格
表格切版
表格切版，加上 RWD。
表格：
tr 欄位(橫向)th 欄位名稱td 資料部分
HTML
無障礙網站使用的 caption：表格標題，記得加上。
使用 colspan="5" 屬性來做欄位合併。
Code12345678910111213141516171 ...
CSS_破格式版面
破格式版面
HTML
Code1234567891011121314151617181920212223242526272829303132333435363738<div class="wrap"> <div class="it ...