新手上路學帖圖和邊框

zzcl知足常樂 2011-01-02

展開全文

新手上路學帖圖和邊框

1.設定圖像的高度和寬度

源代碼:<p align="center"><img src=圖片地址 width="80" height="76">(center指居中,width設置寬,height設置高.如果這兩個參數(shù)都不用,就指的是原圖片的寬和高)

2.設定圖像的邊框之一

源代碼:<TABLE style="BORDER-RIGHT: black 6px dotted; BORDER-TOP: black 6px dotted; BORDER-LEFT: black 6px dotted; BORDER-BOTTOM: black 6px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=black><TBODY><TR><TD><p align="center"><img src=圖片地址></td> </tr> </table>

靠上對齊

3.右圖像相對于文字基準線為靠上對齊

源代碼:<p align="center"><img src="圖片地址" width=20% height=20% align=top> 靠上對齊<p>

4.設定圖像的邊框之二

源代碼:<TABLE style="BORDER-RIGHT: #000000 6px dashed; BORDER-TOP: #000000 6px dashed; BORDER-LEFT: #000000 6px dashed; BORDER-BOTTOM: #000000 6px dashed" cellSpacing=0 cellPadding=0 align=center><TBODY><TR><TD><img src=圖片地址></td></tr></table>

置中對齊

5.右圖像相對于文字基準線為置中對齊

源代碼:<p align="center"><img src="圖片地址" width=20% height=20% align=middle> 靠上對齊<p>

6.設定圖像的邊框之三

源代碼:<TABLE style="BORDER-RIGHT: #000000 6px groove; BORDER-TOP: #000000 6px groove; BORDER-LEFT: #000000 6px groove; BORDER-BOTTOM: #000000 6px groove" cellSpacing=0 cellPadding=0 align=center><TBODY><TR><TD><p align="center"><img src=圖片地址 width="60" height="76"></td> </tr> </table>

靠下對齊

7.右圖像相對于文字基準線為靠下對齊

源代碼:<p align="center"><img src="圖片地址" width=20% height=20% align=bottom> 靠上對齊<p>

/td>

8.設定圖像的邊框之四

源代碼:<TABLE style="BORDER-RIGHT: #000000 6px double; BORDER-TOP: #000000 6px double; BORDER-LEFT: #000000 6px double; BORDER-BOTTOM: #000000 6px double" cellSpacing=0 cellPadding=0 align=center><TBODY><TR><TD><p align="center"><img src=圖片地址></td></tr></table>

9.圖片向上移動

源代碼:<marquee width=100% scrollamount=3 scrolldelay=150 direction=up><p align="center"> <IMG SRC="2.gif"></marquee>

10.設定圖像的邊框之五：源代碼只帖了一層的，自己想要幾層就加幾層，就得到右邊那樣的效果

源代碼:<TABLE style="BORDER-RIGHT: #000000 2px dotted; BORDER-TOP: #000000 2px dotted; BORDER-LEFT: #000000 2px dotted; BORDER-BOTTOM: #000000 2px dotted" cellSpacing=0 cellPadding=0 align=center><TBODY><TR><TD><img src=圖片地址></td></tr></table>

11.用移動做百葉窗效果，右邊的代碼連帖兩次就是右上邊的效果

源代碼:<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=30><IMG SRC="2.gif"></MARQUEE></TD> <TD align=middle><MARQUEE scrollAmount=1 scrollDelay=100 width=30><IMG SRC="2.gif"></MARQUEE>

12.設定圖像的邊框之六

源代碼:<DIV align=center><TABLE style="BORDER-RIGHT: #000000 6px dotted; BORDER-TOP: #000000 6px dotted; BORDER-LEFT: #000000 6px dotted; BORDER-BOTTOM: #000000 6px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=#000000><TBODY><TR><TD> <TABLE style="BORDER-RIGHT: #C48A9E 4px dashed; BORDER-TOP: #C48A9E 4px dashed; BORDER-LEFT: #C48A9E 4px dashed; BORDER-BOTTOM: #C48A9E 4px dashed" cellSpacing=0 cellPadding=0 bgColor=#000000><TBODY><TR><TD> <TABLE style="BORDER-RIGHT: #ffffff 6px dotted; BORDER-TOP: #ffffff 6px dotted; BORDER-LEFT: #ffffff 6px dotted; BORDER-BOTTOM: #ffffff 6px dotted" cellSpacing=3 cellPadding=0 bgColor=#000000><TBODY><TR><TD> <TABLE cellSpacing=6 borderColor=#ffffff align=center bgColor=#000000 border=2><TBODY><TR><TD><p align="center"><img src=1.gif width="60" height="76"></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table>

13.鼠標放上去停止?jié)L動，移開繼續(xù)滾動

源代碼:<marquee onmouseover=this.stop() onmouseout=this.start()><img src="圖片地址"></marquee>

14.設定圖像的邊框之七

源代碼:<div align=center><TABLE cellSpacing=1 bgColor=#000000><TBODY><TR><TD width=8 bgColor=#009999></TD><TD width=8 bgColor=#00cccc></TD> <TD width=8 bgColor=#66ccff></TD><TD bgColor=#ffffff><img src=圖片地址></TD><TD width=8 bgColor=#66ccff></TD><TD width=8 bgColor=#00cccc></TD><TD width=8 bgColor=#009999></td></tr></table>

15.圖片左右移動

源代碼:<marquee width=100% behavior=alternate><IMG SRC="圖片地址"></marquee>

16.設定圖像的邊框之八

源代碼:<div align=center><TABLE cellSpacing=1 bgColor=#000000> <TBODY><TR><TD bgColor=#0066cc height=3></TD></TR><TR><TD bgColor=#3399ff height=3></TD></TR> <TR><TD bgColor=#66ccff height=3></TD></TR><TR><TD bgColor=#ffffff><img src=1.gif width="60" height="76"></TD></TR><TR><TD bgColor=#66ccff height=3></TD></TR><TR><TD bgColor=#3399ff height=3></TD></TR><TR><TD bgColor=#0066cc height=3></td></tr></table>

編輯:寵兒華聲音畫學堂