CSS 語法教學/工具下載/線上手冊

文章分類: 工具-資源
2007-07-04 18:06:00 by: joooooohs
圖例:網路廣告行銷案例(CSS語法查詢工具畫面)

除了網路活動,我們也接了幾個官網(如:周杰倫的JVR,達美樂)。

做企業官方網站,不懂CSS肯定不行。我們也開始使用CSS(DIV)拉出畫面結構,然後再搭配TABLE來做版面的編排了(和blog版型編排語法類似)。

若是網路廣告方面:blog樣板設計和無名變色龍也都需要CSS的基礎。

以下列出近日最常被問的幾個CSS問題:

**解決文字不會自動斷行,會撐開table或div的問題:
word-break: break-all;
word-wrap:break-word;



**字距設定(letter-spacing):
letter-spacing:1px (會影響內文的換行標籤BR失效)

**FireFox 和 IE 不同之處(margin和padding,border亦同):

IE中,四個數字分別可代表上右下左,若為0可省略單位符號(px):
margin: 0 5px 3px 0; /*外距*/
padding: 0 5px 3px 0;/*內距*/

FireFox中,必須分開來寫(2007-9月時測試似乎又不必拆開了):
margin-top: 0px;/*若為0可省略此行*/
margin-right: 5px;
margin-botom: 3px;
margin-left: 0px;/*若為0可省略此行*/
padding-top:...略...

如果沒有分別設定上右下左:
(IE)margin: 10px; /*代表上下左右各10px*/
(FF)margin: 10px;/*代表上下左右各5px*/


**附上一個CSS 語法查詢工具:

下載附件檔案:CSS 語法查詢工具

**CSS 線上手冊:
http://crow.myweb.hinet.net/css/

網路行銷參考案例
[上一次編輯 by joooooohs, 於 2009-02-08 18:26:58]

★ 我要留言 (不須登入)
表情符號
[smile] [confused] [cool] [cry]
[eek] [angry] [wink] [sweat]
[lol] [stun] [razz] [redface]
[rolleyes] [sad] [yes] [no]
[heart] [star] [music] [idea]
允許 UBB Codes
自動轉換網址
顯示表情符號
暱稱:
* 必填
驗證碼:
驗證碼 * 必填. 填入左側的數字
Email:

網址:

 
引用 tommyfan | |
[ 2007-07-23 22:40:00 ]
FireFox中,必須分開來寫

-_______-!
引用 joooooohs | |
[ 2007-07-24 19:15:00 ]
經過測試,是發現:
firefox會把10px的padding, 變成左右上下各5px。所以我建議是分開來寫。


2007-9月測試, 又不用分開寫了
[上一次編輯 by joooooohs, 於 2007-09-07 19:56:53]
1

>>>>>>>>>>