CSS教學:文繞圖,指令比較:布拉格的羅傑:Xuite日誌
  • 最新文章
  • 文章分類
  • 搜尋文章
  • 關鍵字
  • 日誌使用資源






  • 如何使用RSS
    Powered by Xuite
  • bgmusic
  • 背景音樂: Seaside Drop By
  • Roger
  • 上班族,無事玩Blog
    玩影像處理
    玩MIDI
    玩書寫
    為了對抗消逝的歲月,對抗腦力枯竭,對抗閒來無事的恍神

  • 我的網誌
  • 我的網誌
  • 參觀人氣統計
  • New blogemotion
  • 2006-02-11 01:56 CSS教學:文繞圖,指令比較
  • ?
  • CSS實驗室
  • 好文轉寄
  • 平均分數:0 顆星    投票人數:0
    我要評分:
    標籤 : 


    謝謝 SinnerGloria 對這個主題的指正,製造文繞圖的效果,有兩種指令可用。

     這個文繞圖效果是使用 Float 指令

    我是文字,




    一張用
    FLOAT 指令 "置左"
    的圖檔。
    這圖檔是流口水的小姪子
    他可愛吧!

    想了解如何運用 Float 指令,可參考這篇文章,讓文字乖乖聽你的話:
     
    http://blog.xuite.net/yeegiah/diary/126866



     這個文繞圖效果則使用 Align 指令

    我是文字,




    一張

    ALIGN 指令 "置左"
    的圖檔。
    這圖檔是流口水的小姪子
    他可愛吧!

    在圖檔 HTML原始碼 中加入 Align 指令,也能做成文繞圖效果。Align 指令有三種用法:
     Align="right" 使圖檔置右
     
    Align="left" 使圖檔置左
     Align="center" 使圖檔置中

     舉例:假設某圖檔 HTML 原始檔 語法如下:
    <img src="http://blog.xuite.net/_users/f7/b7/10055976/blog_6267/txt/126866/126866_2.jpg" width="125" border="0" hight="170" />

    如果你想用 Align="left" 讓這圖檔置左,則將 Align 指令插入這裡:
    <img src="http://blog.xuite.net/_users/f7/b7/10055976/blog_6267/txt/126866/126866_2.jpg" 這裡 width="125" border="0" hight="170" />

    如果想要設定文字與圖形間的距離,Gloria 建議可用 hspace 及 vspace 指令分別來調整水平間隔及垂直間隔:
     hspace="你想設定的水平間隔距離"
     vspace="你想設定的垂直間隔距離"

     舉例:想調整圖檔置左,且與文字的水平間隔為 5px,則語法是:
    < img src="http://blog.xuite.net/_users/f7/b7/10055976/blog_6267/txt/126866/126866_2.jpg" align="left" hspace="5" width="125" border="0" hight="170" />



     你還可以去以下網頁逛逛,參考如何運用文繞圖效果:
     http://blog.xuite.net/yeegiah/diary/4603601
     http://blog.xuite.net/yeegiah/diary/4371929
     http://blog.xuite.net/yeegiah/diary/4259952
     http://blog.xuite.net/yeegiah/diary/3979551
     http://blog.xuite.net/yeegiah/diary/3973636

    最後祝大家都有美美的版面,讓看的人舒服,讓自己寫得更開心!

    ~Cheers~

     

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

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



    Roger / Xuite日誌 / 回應(4) / 引用(1) / 好文轉寄
  • 回應