文章專區
網頁設計相關文章
Codepen--美觀實用的線上編輯器
上次我們介紹了jsFiddle,這次我們來介紹一樣是線上編輯器也很受歡迎的Codepen:https://codepen.io/。簡潔的黑底介面設計,與jsFiddle相比美觀許多,點進網頁就可以看到許多具有精湛效果的範例,讓人一點擊進來便足以被吸引目光,不像jsFiddle需要註冊登入才可分享,Codepen的首頁直接讓你看到來自世界各地的優秀作品!
可以註冊使用,也可以保持未登入的狀態,若是登入使用的話,在尋找過去所寫過的代碼時會比較方便,如果是未登入則必須記得系統生成的保存網址。
使用說明:
按右上角「Create」裡的New Pen可以新增檔案
開起來的頁面,分成HTML、CSS、JS和演示效果共四大區塊。
可以從上方Change View中,依照個人使用習慣改變排版方式。
效果可即時預覽,不像jsFiddle得按Run才會顯示。
點開CSS旁的齒輪圖示可做進階設定,像是CSS Preprocessor可以選SASS、SCSS、LESS等等。
CSS Base可直接載入reset.css,Add External CSS可以載入外部的CSS
JS也一樣可以做設定