鐵人檔案
前言:今年採用的主題是CSS和SASS，透過參加這次活動，把CSS和SASS基礎觀念給建立好，所以有些文章內會直接取材大神的教學內容，文章內也會註明! 特性...
使用checkbox label來做switch開關，如下圖 html <div> <label> <input t...
Tab Panel面板是單一切換對應內容，所以用radio單選方式比較適合 html <div class="panel-group&quo...
輸入帳戶、email等資料常看見有小的icon，在此整理兩種作法 使用icon字型(font awesome) 1.載入icon字型(font awesom...
對話框主要是由正方形和三角形組成，之後把三角型移動到正方形下面就成了對話框 三角形製作原理 從下圖範例看正方形4個border加寬可看出，border斜邊組...
流程如下:1.建立旋轉緞帶2.裁剪緞帶3.建立緞帶背面陰影4.套用到圖片 成品如圖: 1.建立旋轉緞帶 html <div class="...
進度條使用 ul和li搭配偽元素before和after，結果如下圖 流程如下:1.排放li位置，使用偽元素放內容2.使用計數器3.加上線條4.設定活動狀態...
在此做的背景效果有兩個:毛玻璃和彩色透明背景如下圖: 毛玻璃 上圖中可看出模糊的圖案是最底層的背景圖，並且滑動時，該區塊以內的背景是模糊的，所以背景和毛玻璃區...
使用手機、平板、電腦時會有縮放顯示問題，在此提出幾個常見案例: 圖片等比例 也就是圖片隨裝置縮放以圖片中間裁減縮放，不會整張圖隨著裝置大小縮放，圖片也比較大張，...
滑動區塊是網頁常用的視覺技巧，六角學院的jQuery課程中有兩個簡單效果: 滑動廣告: 滑到圖片時候，文字區塊由下往上移動 滑動選單: 點擊黑色區塊，紅色選單...
