CSS 可以使用變數啦！

http://muki.tw/tech/native-css-variables/

Bootstrap 英文雜誌版型

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Bootstrap 英文雜誌版型

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

美美程式碼 pre class="codeblock prettyprint"

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

HTML 編輯器

HTML 原始碼　　　　　顯示結果
<!-- 預設貼入的CSS：開始 --> td, th { padding:10px; } th { background-color:black; color:white; } table { border-collapse: collapse; border: 1px solid #373737; } <!---預設貼入的CSS：結束 --> <!-- 預設貼入的HTML：開始 --> Hello! <a href="http://tw.yahoo.com">Yahoo</a><br/></br> <table> <tr><th></th><th>欄 1</th><th>欄 2</th></tr> <tr><th>列 1</th><td>1,1</td><td>1,2</td></tr> <tr><th>列 2</th><td>2,1</td><td>2,2</td></tr> </table> <br/> <form action="signup" method="post"> 帳號: <input type="text" name="user"/><br/> 密碼: <input type="password" name="password"/><br/> 信箱: <input type="email" name="email"/><br/> 生日: <input type="date" name="birthday"/><br/> 照片: <input type="file" name="picture"/><br/> 性別: <input type="radio" name="sex" value="male" checked/> 男 <input type="radio" name="sex" value="female"/> 女<br/> 血型: <select name="BloodType"> <option value="A">A 型</option> <option value="B">B 型</option> <option value="AB">AB 型</option> <option value="O">O 型</option> </select> <br/> 自我介紹： <br/> <input type="submit" value="送出"/><input type="reset" value="清除"/><br/> </form> <!-- 預設貼入的HTML：結束 -->

想學程式設計，你怎麼能錯過這 31 個學 Coding 的網站

http://techorange.com/2014/03/27/best-resources-to-learn-code/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+techorange+%28TechOrange%29

轉場特效

透明 模糊 陰影 翻轉 特效習作

用 butterfly 3 圖相為例，

一個 table，二列 二行，

(1,1) 格：透明
(1,2) 格：模糊
(2,1) 格：陰影
(2,2) 格：四效綜合，透明、 模糊、 陰影、 翻轉。

櫻樹 變 櫻花 (超連結 與 滑鼠游標特效 習作)

櫻樹 變 櫻花

cursor: not-allowed;
padding: ?px ?px ?px ?px;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO1tqG3ogMk2fUz2lMnri7jklLmVZQsgXt1t1yMEEoUnA8_tuCizc9lbVqMaPfpnRRqNiES3zqChVqKLUSKiRUU0cEWyW4aR8vEMJgQRgYtzSH9maFsb8AA9M7eR9WrpEMeBkN5TzIahyq/s1600/%E6%AB%BB%E6%A8%B9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeBBjw3gy4_Ig6Wc-QD7rF0I-gGPi2RcIu4R6Zyq0xC5MKEEhVabVI7Lcsut_jX7smCWCF9L9phl-yD2HY9cv1nHxj_mr567A9AjxzYEHG0i1FxCSVjkH0vyUqLruG-s2hormxPLZ_NEK4/s1600/%E6%AB%BB%E8%8A%B1.png

CSS3 圖層定位 習作

Don't put off till tomorrow what you can do today.

邊界留白範例

What is a slice?

練習用圖檔

CSS3 捲動背景圖案 習作

~明．愿雲~
千百年來碗裡羹
怨深似海恨難平

欲知世上刀兵劫
但聽屠門夜半聲

CSS3 固定背景圖案 習作

~明．愿雲~
千百年來碗裡羹
怨深似海恨難平

欲知世上刀兵劫
但聽屠門夜半聲

CSS3 設定背景圖案 習作

~明．愿雲~ 千百年來碗裡羹 怨聲如海恨難平 欲知世上刀兵劫 但聽屠門夜半聲

CSS3 教學練習用背景圖

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwDKNunGlPqv0nHfDHo_UVf4S0Ce2M4XV9e7xIFpdHFSwh7-438j5ntf0A_KdNNDpSrdtZ4eeAYmOkeygaZBmhfm1fK8nTaw1R5uldGMbkuw2bI6EzZoJGnc52CyK-c0MIUG5e9cHtSY0/s1600/Chrysanthemum.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OjKLior9X_NiBUiFpaoeIRRFViP_47kHkGtmZcnrNlUwjKQn89SkEZkA0JmWz7ZuOiEsjqz7eShG0IH8i7_5cPdsfn8Ey1UfTHERLMKRNS3zsVo0neYGPzI88nJ_WEe4B1EDr3AwjwHy/s1600/Lighthouse.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHss6fTOQYuO0UQGyvtbH6Muzbjc8vPukJeqYUhilBG7MNoHye7EhQ0eBYmIQ8SXqAEy0n8D73RAaUYiIQyv2U6MYe0mVAdu4uh6kk-w6WlSRfOJtcHMPVopSt9I9YYVx8NpwXPjePqOev/s1600/bg1.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBoUwSVdDaD1bWxZDASkGUszNpTunjK0oig9tZmf4BgArcb0zcvG9ky2mLRm9W94oyFLwuZyMAP52wOLpMnlxBNg7UzRoWHeVNS-pHmxBGqKFYNL2LV1dB46Vi1z6BVYqYa6bHUr7tlcbd/s1600/dot.gif

CSS3 rgb color-code Test

這就是標題一

這就是標題二

這就是標題三

這就是標題四

這就是標題五

這就是標題六

CSS3 下標字 習作

My mother has blue eyes.

溫室氣體主要有三：
1. 二氧化碳：CO2；
2. 甲烷：CH4, 37 ％ 來自肉食（溫室效力是 二氧化碳 x72 ）；
3. 氧化亞氮：N2O, 65 ％來自肉食（溫室效力是 二氧化碳 x310 ）。

畜牧業產生 51％ 以上的溫室氣體
       〜世界瞭望雜誌世界觀察

吃素能節省 80％ 成本達氣候目標
       〜荷蘭環境評估委員

我相信有那麼一天，
人類會以他們現在看待人類互相殘殺的心態，
來看待謀殺動物的行為。(達文西)
=====================================================

CSS3 背景顏色 習作

中庸 喜怒哀樂之未發，謂之中。 發而皆中節，謂之和。 致中和，天地位焉，萬物育焉！