網頁製作常用代碼集

文字與圖片的幾種排版用法(含代碼)一.把圖片放在文字的左邊,代碼效果如下:

  1. <P><IMG height=201 src="https://www.getit01.com/getimg_360.php?url=http://image5.360doc.com/DownloadImg/2009/11/24/476374_9659738_1.jpg" width_=154 align=left border=0><FONT>日誌文字</FONT></P>

複製代碼 如果你覺得文字與圖片太接近了.可加入[vspace=0 hspace=30]. 加入後的代碼:<img border="0" src="圖片地址" align=left vspace=0 hspace=30 width_="154" height="201"> 你可以調整這兩個值,通過試驗看一看會有什麼樣的變化... 改後的代碼是:<P><IMG height=201 hspace=30 src="圖片連接地址" width_=154 align=left border=0><FONT face=Arial>日誌文字</FONT></P>二.把圖片放在右側

要想把圖片放在右側,可把[align=left ]改成[align=right ]改後的代碼如下:<P><IMG height=201 src="圖片連接地址" width_=154 align=rightborder=0><FONT face=Arial> 日誌文字<BR>&nbsp;</FONT><BR clear=left></P>三.在圖片上加日誌文字代碼<DIV style="WIDTH: 300px; HEIGHT: 240px"><IMG height=240 src="圖片連接地址" width_=300 align=right> <DIV style="FLOAT: left; WIDTH: 300px; HEIGHT: 240px; BACKGROUND-COLOR: transparent"><BR><FONT color=#ff00ff>日誌文字日誌文字日誌文字日誌文字日誌文字</FONT> </DIV></DIV>四.全背景文字混排:

  1. <DIV style="WIDTH: 378px"><IMG height=230 src="圖片連接地址" width_=378 align=right>
  2. <DIV style="FLOAT: left; WIDTH: 360px">
  3. <DIV style="LINE-HEIGHT: 15pt; LETTER-SPACING: 0.1em">
  4. <P><FONT color=#0099ff><FONT face="Lucida Handwriting, Cursive"><FONT size=1>這是第2行<BR>這是第2行<BR>這是第3行<BR>這是第4行<BR>這是第5行<BR>這是第6行<BR>這是第7行<BR>這是第8行</FONT></P></DIV></DIV></FONT></FONT></DIV>

複製代碼網頁製作常用代碼集一.網頁加寬代碼<DIV style="LEFT: -125px; WIDTH: 1000px; POSITION: relative; TOP: 0px">二.網頁貼代碼<P align=center><A href="http://www.xiaofan06.cn/fan/zfhk.html" target=_blank><FONT face=黑體 color=#386138 size=4>點擊進入看全屏</FONT></A></P><P align=center>&nbsp;</P><P align=left></P><DIV style="LEFT: -125; WIDTH: 1000; POSITION: relative; TOP: 0px"><IFRAME marginWidth=0 marginHeight=0 src="https://www.getit01.com/getimg_360.php?url=http://www.xiaofan06.cn/fan/zfhk.html" frameBorder=0 width_=1000 scrolling=no height=4000></IFRAME></DIV>三.圖片類代碼貼圖片常用的代碼:做網頁時用的<img<Palign=center><IMG style="FILTER: Alpha(Opacity=100,Style=2);WIDTH: 300px; HEIGHT: 450px" height=450 alt=""src="https://www.getit01.com/getimg_360.php?url=http://img04.21cn.com/2006/06/05/5693192.jpg"></EM></STRONG>&nbsp; </P> <img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width_=500> 先看懂這個代碼:img 貼圖片的專用元素,src= 指定地址(url)的專用屬性,在這個標籤里他的內容只能寫圖片地址.width_= 寬度屬性,用於設定圖片的寬度. 還有幾個常用的屬性:border= 邊框厚度,給圖像加個框,這個框的顏色默認值是黑色.height= 圖片高度,除特殊需要一般不寫為好,只寫寬度,高度會按比例顯示.(當然,有時需定高度,那就不寫寬度,也一樣比例正常) 寬和高都不寫,則顯示圖片的原始尺寸.align= 位置屬性,指定圖片安放的位置,他的值有:top 靠上absbottom 靠下,left 靠左 right 靠右center 居中注:1.這個位置屬性可以不寫,瀏覽器默認為靠左.2.有的版本不識別align=center,那就將<center>和</center>放在圖片代碼兩邊,圖片就居中了. 加框:代碼:<img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width_=360 border=6>

推薦閱讀:

快速製作圖片網頁[隨緣]
為什麼虛擬現實網頁可能永不會實現
【問題解答】python解析網頁源代碼返回亂碼問題 | 在路上
HTML
楊藝教你交誼舞【共216個=34+95+87網頁】

TAG:代碼 | 網頁 | 網頁製作 |