文繞圖先看效果，這次要做的是文繞圖技巧，可以選擇靠左或靠右。 html結構圖片(img)必須在段落(p)的上面，當圖片加上float:left屬性時，圖片的空間會消失，變成浮在畫面上，利用這個技巧，我們來做到文繞圖的效果。 ...

我用兩個不同方法個別製作出網站來讓大家比較看看： 純CSS打造捲動式動畫網站wow.js打造的捲動式動畫網站 接著來介紹這wowjs的製作方法與其優缺點。 使用方法：第一步要做的是animate.css與wow.js載進網頁中。接著幫要使用 ...

demo 第一部分：使用CSS撰寫Slide In效果這個單元使用的技巧有： 使用transition讓屬性值改變時有動畫的效果 使用animation-fill-mode設定結束狀態 使用transform:translate移動元素 ...

Demo展示頁 作法說明1.幫body加工將body加上display: relative，如果還是不行使用的話加上width: 100%與height: 100%。 123display: relative;width: 100%;hei ...

製作jumbotron有兩個重點 垂直置中 設定背景。 Background 設定position: center bottom讓圖片顯示出需要的區塊 使用background-size: cover;讓圖片滿版 1234567891 ...

這篇很簡短，但還是筆記一下怎麼用，因為網路上找的資料有點繁雜。 原理github的gh-pages分支可以用來展示靜態網頁，推上去就可以正確展示了。 步驟 建立新的branchgit branch gh-pages 推上githubgit ...

完成品展示頁 Materialize 是除了 Bootstrap 以外現今相當熱門的前端框架，可以製作的網頁類型相當廣泛，未來將使用 Materialize 來開發一些小作品，是今天練習的主要目的。 實現Materialize框架提供的視差 ...

標題列(Header)固定的標題 往下捲動時仍然會固定在上方 ...

module抽離出常用元件，負責大致的外觀SMACSS是Jonathan Snook所發表的一個CSS/SASS的設計模式。在製作button時我們會把它放在module資料夾底下，並存成檔名為_btn.scss。在modules資料夾中的 ...

1.ImportSASS在檔名前面加上底線時，不會直接編譯成CSS，使用@import引入後，才會編譯。 2. Mixins常見的mixin作法，要傳入的引數前面需加上$字號。 12345678910/* Mixins */@mixin b ...

第二個練習一樣學習tuts的課程，選擇課程的好處是做到一半不知道該怎麼做時，有video解答可以看。看看高手怎麼做總是比自己亂弄的好的多。我選擇的課程是需要付費的，tuts還有一些免費的教材可以學習，影片或是文章教學都有，有興趣的自己發掘囉 ...

最近在訓練排版的熟練度，要快速打造protype基本的前端技能是必須的。我選擇的教材是tuts的psd to html porfolio。課程中介紹了詳細的切版流程，從切圖到建構html到用css排版都有詳細的介紹。本篇是psd to ht ...

sublime的套件安裝與使用方式請看這裡 學習 Bootstrap 的幾個重點 學會使用grid system切版。 找相似的範例來練習版面。 練習熟練到可以直接打指令叫出想要的元件。 懂得微調成自己想要的。 了解如何傳值給後端(sele ...

因為學習HTML在一般的標籤上並沒有遇到什麼問題，所以就不多做說明。直接進入比較容易混淆不理解的地方，就是HTML的額外標籤。 HTML的額外標示 一般常見的標籤，很容易理解，所以特別針對HTML的額外標示來加強需具備的Web知識。 1. ...