
謝謝 Sinner 跟 Gloria 對這個主題的指正,製造文繞圖的效果,有兩種指令可用。
這個文繞圖效果是使用 Float 指令
|
想了解如何運用 Float 指令,可參考這篇文章,讓文字乖乖聽你的話:
http://blog.xuite.net/yeegiah/diary/126866
這個文繞圖效果則使用 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



我是文字,
