在寫網頁的時候,最常用也最普遍的東西就是CSS

CSS其實只是網頁的一小部分

主要是把整個網頁裡面跟色彩還有配置的東西丟到這個file裡頭

就可以區別開來平常的code還有設計用的code

簡單的說就好像請一個設計師來你家裝潢一樣

CSS的配對就是看前台的ID或是classs對到後台的code

如果是ID

寫法是

#my mirror

{

Code here

}

如果前台是class

.chair

{

}

IDclass的差異在於,ID只可以給一個人用,class則可以一堆人共用

所以椅子有很多張,裝潢都用同一個即可


超連結(hyperlink)

在設計網頁時,超連結的顏色跟配置是分開的

通常使用


a:link

{

    color:           #4169E1;

}

若要不同Class使用不同的超連結時,例如class名稱為detail

.detail a:link

{

    color:           #FF7700;

}

 

CSS中需要注釋的話用

/*解釋在裡頭*/


CSS的學習網站

1. http://www.w3schools.com/css/default.asp

英文的介紹網站,資料非常齊全,甚至連色彩的code都有附

這網站有大陸版:http://www.w3school.com.cn/css/

2.http://css.1keydata.com/tw/

中文的介紹,但比較基本

3.http://www.webpage.idv.tw/study/03/07/table2.htm

table的教學

 


線上工具系列 

Icon 

1.http://www.freeiconsdownload.com/Index.html

一些免費的icon提供下載,只能適用非商業用途

2.http://www.iconfinder.com/


輸入你想要的icon英文名字,例如說:home, calendar, left, right…..

上面還有可以選擇你的icon背景顏色的地方,若是商業用途要在右邊的filter那邊改成Allowed for commercial use


3.http://findicons.com/pack/902/crysigns#

這個搜尋介面是我比較喜歡的

因為不僅有背景顏色可以選擇,還可以選擇你的icon24*24或是36*36或是48*48

還可以依據你想要的顏色作filter,這對網頁配置來說非常方便

同樣的,也有商業用途的選項


色彩配置 

1.http://www.colorhunter.com/

在這個網站輸入你想要配色的顏色(ex. FFA500),他就會列出一系列的色盤

這個網站的好用之處在於

如果你想要配置一整個網頁的色調

那你就需要這個

他會產生五個顏色搭配你搜尋的顏色

這樣你可以把五個顏色分別用在網頁的head, main, foot等等

是不錯的網站


2.http://kuler.adobe.com/

這個網站性質同第一個,也是搜尋後產生一系列色盤給你,由adobe開發 

 

3.http://slayeroffice.com/tools/color_palette/

這個網站是同一個顏色生成10個色盤給你,由淺到深


4.http://www.themaninblue.com/experiment/Technicolor/

這個網站可以讓你看到你的網頁的配色情況,但要一個一個顏色自己輸入


5.http://www.colr.org/

這個網站用於你不知道你的色調代碼,但大概知道英文怎麼寫

輸入英文他會產生類似的顏色給你選

按旁邊Edit可以看代碼


6.http://webcolor.webmaster-kit.com/

這個點完顏色後會自動產生code告訴你怎麼寫

 

7.http://www.colorjack.com/

這個據說是給Ajax用的QQ


8.http://www.wix.com/

懶人專用!

這個可以幫你自制flash網頁,有很多模板可以選



<CSS的一些好用工具如下>

  1.   

配置table的時候很常用到這個,有了這把尺就可以知道px大小了

這裡有兩把免費的尺

a)      Mioplanet pixel ruler


網址:http://www.mioplanet.com/products/pixelruler/

操作說明:對著尺按一下,就可以從衡的變直的,按一下右鍵就自動關閉

優點:簡易好用!滑鼠一直往你要的方向走,就會自動伸長,不需要自己在那邊拉來拉去

缺點:由於是免費軟體,每次開啟都會跳出一個邀請你購買他家產品的視窗,有點惱人


b)      JR ruler

網址:http://www.spadixbd.com/freetools/jruler.htm


操作說明:拉最小化旁邊的小尺可以伸長大尺,按F鍵可以變換方向

 

2. 色盤 

網址:http://www.tucows.com/preview/240092


說明:滑鼠按著左下角的滴管不放,拉到你想要的顏色上面再放手,就可以看到他的代碼和RGB配色

優點:要是瀏覽網站看到你喜歡的顏色,就可以馬上知道他的代碼







Reference:

http://tw.myblog.yahoo.com/cherry-liang/article?mid=-2&next=633&l=a&fid=12

arrow
arrow
    全站熱搜

    lilianecc 發表在 痞客邦 留言(0) 人氣()