教學 / 文繞圖 (轉自布拉格的羅傑-Xuite日誌)

有些人對這篇文章的文繞圖效果感到好奇,
其實它是個非常簡單的語法喔!!
剛好看到不錯的教學,所以把它轉貼過來^^

說明:
1. 謝謝多位熱心網友的指教與分享,文繞圖效果有至少兩種方式可達成。除本篇外,您亦可參考 這裡。看過並比較兩種方式,選擇您喜歡的做法。

2. CSS語法對大多數網友來說並不簡單。Xuite 有許多專家不斷發表教學文章,盡力解答各類CSS問題。如果您有興趣鑽研CSS,請先參考狗貓先生 (狗貓先生是公認熱心公益第一名,特此致敬!),或安哥爾.摩亞 小姐精采的網誌內容。

歡迎各位留下想法及建議。本網誌所有文章皆可引用及重製,有勞您尊重 著作權,勿修改任何內容,並註明" 本文作者 布拉格的羅傑"。


記得剛開始是在 Xuite 上看到網友使用文繞圖,當時自以為是把圖文各放在不同表格,連忙自個兒逕自猛試 Table 指令N次,硬換了種種大小 Table,才發現不成。死了心去檢視別人的網頁原始檔,挖勒!文繞圖根本不是用 Table。


如果你性急,不看完本文就想馬上試身手,以下是我使用的語法,希望能助你如願:




你可以抄錄這裡的紅色字串,插入 HTML 原始碼 < img src... > 的 img 跟 src 中間:
STYLE="FLOAT: LEFT; MARGIN: 15PX"

 

STYLE="FLOAT:" 指令要發揮作用,除了必須寫對,還得放在HTML原始碼正確的地方。我並非 CSS 專家,本文所載僅供各位自娛娛人。這裡僅就圖片的定位做說明,如果看官們有興趣深究 STYLE="FLOAT:" 指令,請參閱 這裡, 或 W3C網站

先從寫出正確指令說起,STYLE="FLOAT:" 可以指定四種不同值:

STYLE="FLOAT: LEFT;"

物件 (在此是圖片) 置左

STYLE="FLOAT: RIGHT;"

物件 (在此是圖片) 置右

STYLE="FLOAT: NONE;"

不變

STYLE="FLOAT: INHERIT;"

物件 (在此是圖片) 繼承先前宣告值

對 Blogger 來說,懂得如何置左或置右就足夠了。

接著要用 MARGIN 指令設定圖片與文字間距:
設定間距的單位很多,我用 PX 這種相對單位;如果你改用 em,甚至其他絕對單位 in 或 cm 亦可。
 
為了不要逐一設定 margin-top,margin-right,margin-bottom,margin-left,我採用 MARGIN: 15PX 搞定間距問題,這會使圖片上下左右都會與文字間距 15PX。一般來說,5PX 到 15PX 之間的視覺效果都不錯,看官們不妨自己試試。

到這步驟為止,我們得到的原始碼是:STYLE="FLOAT: LEFT; MARGIN: 15PX"。請記得 MARGIN 跟上一段間要用分號隔開。


以下為Xuite插入語法教學 (點我繼續閱讀)



置頂的圖檔採用文繞圖,且使用自訂摘要時,發生圖片無法正常顯示。該怎麼處理?
快去看 Bassanio 的 這篇大作,用 DIV 指令讓自訂摘要正常顯示,還能產生超級無敵摘要。

Xuite CSS教學、樣式與問題整理
http://blog.xuite.net/yeegiah/diary/11431003

更多關於羅傑的CSS:
http://blog.xuite.net/yeegiah/diary?st=c&re=list&p=1&w=110964

CSS 語法參考辭典



arrow
arrow
    全站熱搜

    bamcloud 發表在 痞客邦 留言(11) 人氣()