系列文章
Day1 如何開始前端之路
抉擇從來不難，難在下定決心執行 開始之前，說說自己 踏入前端可能從來不在以前的自己想像中，也不會是長期規劃後的結果。大約兩個半月前，我還在前公司擔任 IE 工程...
Day2 開始了，那麼工具呢？
工欲善其事，必先利其器，來準備一下你的工具吧 剛開始學習的時候，除了需要瞭解最重要的程式語法外，還必須知道一些工具，讓你啓程。 首先最最最重要的就是編輯器了！！...
Day3 工具都準備好了，到底怎麽開始切版呢？
古人有云：「先謀定而後動，則無往而不勝」動手前，先想一想，你要切的版是什麼樣子的？ 好，那麼，假設你看了一些文件，也試著打開記事本(我一開始真的是用記事本，之後...
Day4 盒子的大小？
讓我們來打開神祕小盒子，一探究竟。 在排版時，我們習慣將每一個區塊看成一個盒子來進行排版，排版結果由盒子性質及大小決定，而盒子大小受盒子相關屬性及計算方式影響，...
Day5 來切一個一定會有的 header 吧
打開每一個網頁，百分之 99.999999999 一定會有 header ，那我們就來切一個吧! 在切版的學習過程中，就是一直找東西來切，切久了就會從各種狀況中...
Day6 如何做出響應式網頁(RWD)？
常常聽到響應式網頁，但是怎麼做呢？ 響應式設計(Responsive web design)指的是使網頁內容在不同裝置下，都可以呈現出適切的內容。在說明如何設定...
Day7 利用純 HTML / CSS 來一個好吃的手作漢堡
考慮 RWD 網站中，一定要來一個美味的漢堡！ 第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡，我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...
Day8 如何設定 CSS 陰影效果呢？
陰影在很多版型中都會出現，那麼它到底如何設定的呢？ 陰影可以讓畫面上的靜態元素看起來更立體，或是也能利用陰影增加與使用者之間的互動性。首先我們來看看它可以被設定...
Day9 來試試看僞元素吧(before/after)
利用僞元素爲你的頁面在添加點東西吧 初接觸僞元素時，覺得有點不直覺，但後續發現它真的滿好用的，很值得好好瞭解它。那麼~什麼是僞元素呢？其中的 " 僞...
Day10 讓圖片好好裝在盒子裡
在網頁中常常會需要各式各樣的圖片，如何讓它按照你的想像，好好呈現在網頁上呢？ 讓圖片呈現在網頁上，一般我們會想到使用 img 標籤。我們先試試看最單純的一張圖片...