啟步學代碼【14】
雪球兒書館歡迎您的光臨 愿您開心快樂
歡迎您!啟步學代碼
(原創(chuàng)制作者:游子。供初學HTML代碼的朋友參考)
如何在圖框內(nèi)插入圖片或文字。
學習和掌握了HTML代碼兩大基本功即文字設(shè)置和表格設(shè)置
之后,就可以制作一些多姿多彩的代碼貼了。
我們可以在一張用圖片或顏色作背景的表格單元格內(nèi)
(單層或多層圖框內(nèi)),插入多段文字的和圖片.
根據(jù)插入的圖片寬度和色彩選好圖框。有些論壇對代碼
貼圖的寬度限制在500之內(nèi),所以圖框包括邊線寬度不能
超過500,插入的圖片寬度在400以內(nèi),否則其超過部
份就無法顯示。如果論壇對代碼貼寬度不限制,插入的圖片就
可寬限些.由于插入的圖片加圖框的寬很大,所以必須設(shè)置
全屏代碼,才能完整顯示。網(wǎng)絡(luò)上有很多漂亮的圖框(套裝)
,可以拿來套用。啟步學習時,最好采用較簡單的圖框。
在一張圖框或圖片內(nèi)如何插入文字和圖片?
要在表格的單元格<TD>與</TD>中間插入。例如:
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=華文行楷 color=#0000ff><B><p align=CENTER>插入文字或圖片</P>
<p align=CENTER>插入文字或圖片</P>
<p align=CENTER>插入文字或圖片</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>
說明:
●width=480=圖框?qū)挾龋?div style="height:15px;">
●height=350=圖框高度;
●bordercolor=oliv=邊框顏色;
●border=8=邊框線粗度.
●background=背景圖片地址.
顯示結(jié)果:
插入文字或圖片
插入文字或圖片
插入文字或圖片
代碼實例:
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=華文行楷 color=#0000ff><B>
<br> <p align=CENTER>萬紫千紅總是春</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_7.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_8.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_9.jpg"width=400 border=1>
</P>
<p align=CENTER>圖文:網(wǎng)絡(luò)/編輯:游子</P>
</B> </FONT>
</TD></TR>;</TABLE></CENTER>
顯示結(jié)果:
萬紫千紅總是春
圖文:網(wǎng)絡(luò)/編輯:游子
把上面窄幅代碼貼的圖框和圖片寬度各加大200,代碼如下:
<TABLE width=680 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=華文行楷 color=#0000ff><B>
<br> <p align=CENTER>萬紫千紅總是春</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_7.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_8.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_9.jpg"width=600 border=1>
</P>
<p align=CENTER>圖文:網(wǎng)絡(luò)/編輯:游子</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>
顯示結(jié)果:
萬紫千紅總是春
圖文:網(wǎng)絡(luò)/編輯:游子
像這樣的寬幅代碼貼,就必須加設(shè)全屏代碼:
在代碼的第一行前面加以下代碼:
<DIV id=table1 style="LEFT: -220px; WIDTH:
800px;POSITION: relative; TOP: 40px">
在代碼最后一行加以下代碼:
</DIV><br><br><br><br>
不設(shè)置全屏代碼時,貼子右邊有一部份不能顯示。
(待續(xù))
編輯:游子
(為了讓更多網(wǎng)友學用html代碼貼圖制作網(wǎng)頁,本貼歡迎轉(zhuǎn)載,但是,轉(zhuǎn)載時請不要把原創(chuàng)編輯游子的名字改掉。謝謝?。?