文章專區

網頁設計相關文章

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也一樣可以做設定

 
完成之後按Save,上面的網址就是你這篇demo的保存網址囉!
但是若需要使用嵌入功能(Embed)的話,必須註冊登入後才可以唷!
 
範例:一樣以上次的下拉式選單做例子