2013年9月8日 星期日

如何應用codepen資源?

一開始接觸codepen是下列這個撕破網子的遊戲

http://codepen.io/stuffit/pen/KrAwx




後來瀏覽幾個其他特效, 也相當有趣。如果css和js 可以直接引用就好

我就以橘色按鈕當做例子
http://codepen.io/fivera/pen/dwDmt





使用的編輯器是sublime

先按ctrl + shift + P 選擇html , 將html 該有的都打上去,

<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>

再將檔案中的html代碼複製下來, 貼在

<!DOCTYPE HTML>
<html>
<head></head>
<body> /*將代碼貼在這裡*/</body>
</html>


可以先用瀏覽器打開看一下有沒有Explore 

然後要引用css有兩種方法, 

A.直接引用網頁資源
B.放在自己主機再引用




A. 

將上方的連結複製, 在後頭加上.css, 

原本http://codepen.io/fivera/pen/dwDmt
後來http://codepen.io/fivera/pen/dwDmt.css














然後<head>...</head>之間打上

<head>

<link rel="stylesheet" type="text/css" href="http://codepen.io/fivera/pen/dwDmt.css">


</head>

存檔後, 用瀏覽器開啟, 就可以看到EXPLORE



B.

將css中所有代碼複製下來, 在sublime開新檔案, 貼上, 另存成css檔

放在和html同一個資料夾


然後<head>...</head>之間打上

<link rel="stylesheet" type="text/css" href="./defaultName.css">

存檔後, 用瀏覽器開啟, 就可以看到EXPLORE



另外一個相似的網站也很好用!

http://jsfiddle.net/
http://dabblet.com/