教學 / 文繞圖 (轉自布拉格的羅傑-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 語法參考辭典



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


留言列表 (11)

發表留言
  • sinso
  • 哈哈哈
    老實說我以前也用table試過=_=...
  • 真的嗎?
    還好我之前就看過相關教學
    所以知道要用float
    不然我可能也會用table吧
    因為真的蠻像的^^

    bamcloud 於 2007/09/04 00:11 回覆

  • cafe5417
  • 會了!!

    謝啦ˇ
  • ookq
  • 我記的圖片格式好像也有這樣的效果(?)
    忘了XDD總之感謝分享呢:))
  • 應該有很多方法啦
    大家就找一個最合用的吧^^

    bamcloud 於 2007/09/04 00:12 回覆

  • bluemomo
  • 好喜歡這一篇的教學唷
    謝謝bam大的分享
    ---
    話說,我還是好喜歡迴響上面的表情
    超可愛的...
  • 不客氣...
    哈哈!!看來你真的很喜歡呢!!
    話說我快換掉它了。
    之後再把它放上來分享吧^__^

    bamcloud 於 2007/09/04 00:13 回覆

  • renee3620
  • 啊啊,我一直在找這個的教學ˊˋ
    總覺得圖旁邊有字,感覺又節省空間又很美觀^^
    謝謝南西的教學><
  • 不客氣喔!!
    我也很喜歡這樣的排版^__^

    bamcloud 於 2007/09/04 00:14 回覆

  • standinghere
  • 我每次要用文繞圖時,
    都直接用進階編輯...(就是一整個懶惰)
    --
    不過,好像很多人不太會用進階編輯@@a
  • 進階編輯器其實很方便!
    但我的電腦每次切換都很LAG,
    不知道為什麼?(可能太老舊了!)

    所以只好很認命的打語法囉
    ╮(╯_╰)╭

    bamcloud 於 2007/09/07 08:22 回覆

  • shan816
  • 真是好用!語法真好玩耶QQ"
    謝謝版大細心教學!!
  • cow1xd
  • 謝謝教學啊 :)
    很好用 !!
  • harpsicello
  • 哈~我也是笨笨的用表格耶!!
    感謝分享~我用的一篇有文繞圖的在這裡:
    http://blog.pixnet.net/harpsicello/post/12685882
    好累喔.............因為版面比較寬
    我還改了margin-left跟margin-right
    擔心以後套用較窄的版型 圖右會跑掉了XD


    dai
  • sweetbaby
  • 讚喔!!謝謝分享嚕