現在的網頁設計要注重標籤(Html Tag)所代表的意義, 但是 Tag 代表的意義要從 W3C 的 HTML 4.01 Specification 從頭看到尾, 實在很辛苦...
這個站就是把 Html 語法列在左邊, 點選後右邊會出現此 Tag 所代表的涵義, 右下方中間會出現範例(可以點選, 修改此範例), 最右下角會出現此範例的完整呈現, 是相當實用的工具(tool)站.
詳見: HTML Playground, html, css reference by example
見到下面的留言, 有很多長輩都肯給小弟指導, 我就把大家給我的整理一下, 再加上我以前蒐集的一起貼出來~ 🙂
我把以下分成五大類, 由初級到進階列表.
css 教學:
- CSS(Cascading Style Sheet) Note (中文筆記)
- Cascading Style Sheets (串接樣式表)的基本介紹
- W3C CSS Learn
- 如何 用 CSS float 切割三欄式頁面
輔助工具:
- Properties : CSS 2.1 Reference 一層一層選下去, 可見到說明
- CSS Documentation Helper: CSS Documentation Shortcut (類同 API Search)
- All CSS Properties Listed Alphabetically
範例兼測試:
- Creating a Style-Guide for your site - 範例
- Font Tester - Preview Fonts
- CSS 線上編輯器
實用工具:
- CSS整形與最佳化工具(壓縮) - 很棒的工具
- Optimize and Compress CSS Files
成品套用:
這個 html 輔助器實在太棒了!想請問有沒有 css 的?我還是搞不定 css~
http://www.culturedcode.com/css/reference_app.html
太感謝了!
我手邊有兩個 css 輔助器,不過它比較針對字型,大家參考囉!
http://www.fonttester.com/
http://demo.rexsong.com/200601/qrone_css_designer/
感謝兩位大大的提供, 小弟會再含我自己找的再統一整理上去~~
感恩~ Orz..
這工具真的很實用
謝謝分享 🙂
都是其它長輩分享的比較多 🙂