博客留言貼圖新技巧
特別提醒：從本月27日開始，網易已禁止在留言欄發圖，因此本文中的代碼在留言欄中不能再用了，但用在其它地方還是可以的。謝謝大家對本博客的支持！---2009.5.29網易博客留言貼圖新技巧（一）近期，網易對留言欄的功能進行了限制，原來一些常用的代碼和方法，現在大多數都不能再用了。為了扭轉這種局面，不少網友勤於實踐，勇於創新，探索出很多能用的代碼和新的方法。最近，本人也發現了貼圖的一些小技巧，所用的代碼簡短、方法簡單，盡量不用或少用表格代碼，也能達到較好貼圖效果。現將本人的這套小技巧奉獻出來，希望大家喜歡！基本代碼及方法基本代碼： <P title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬px; HEIGHT:高px"></P>或 <DIV title="<0>" style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬px; HEIGHT: 高px"></DIV>編輯方法：可用「日誌」或「HTML在線編輯器」編輯貼圖代碼，下面是以「日誌」為例。1、複製上面代碼，粘貼在日誌里：複製上面代碼→點寫日誌→點<>進入代碼編輯→粘貼上面代碼；2、輸入圖片的地址、高度、寬度：輸入圖片地址→輸入圖片高度、寬度→點<>返回→點發表日誌。使用方法：1、可直接將圖片複製粘貼到留言欄：選中圖片→右鍵複製或點工具欄中的複製→打開留言欄→點全部功能→右鍵粘貼→發表留言。選中圖片的方法：滑鼠從圖片的下面向上滑動。在滑動時，如圖片下方出現白框或白點時表示圖片被選中。圖片選中後，輕輕地按右鍵複製。如按右鍵不能複製，可點擊網頁工具欄中的「複製」按鈕。2、可將圖片代碼複製粘貼到回復欄：複製編輯好的代碼→點回復此留言→右鍵粘貼→確定→點「查看留言記錄」（看顯示效果）。實例01代碼<P title="<0>"style="BACKGROUND-IMAGE: url(http://img.bimg.126.net/photo/r7zYAk87ankPByZtll9Hpg==/2045197180781159179.jpg); WIDTH: 460px; HEIGHT: 325px"></P>實例01效果淡化邊緣效果實例02代碼<P title="<0>"style="FILTER: Alpha(opacity=100,style=2); BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px; HEIGHT: 400px"></P>其中：opacity:開始處的透明度，finishOpacity:結束處的透明度；style:0,平均透明 1,線狀透明 2,圓形透明 3,菱形透明。實例02效果添加邊框效果實例03代碼<P title="<0>"style="border:14px #987cb9 double; BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px;HEIGHT: 400px"></P>實例03效果實例04代碼<P title="<0>"style="border:14px #987cb9 groove; BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px;HEIGHT: 400px"></P>實例04效果HTML在線編輯器：（ 1 2 3 ）注意：非163.com/和126.net/域名的圖片，或者說不是網易的圖片做出來的圖帖，有時不能直接複製粘貼。 但是，編輯出來的代碼可複製粘貼到回復欄，點「查看留言記錄」後，能夠顯示效果。一、最簡的貼圖表格代碼代碼一：<TABLE title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬度px; HEIGHT: 高度px"align=對齊><TBODY><TR><TD></TD></TR></TBODY></TABLE>圖片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_1.jpg圖片大小： 450×290代碼二：<TABLE align=對齊><TBODY><TR><TD><DIV title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬度px; HEIGHT: 高度px"></DIV></TD></TR></TBODY></TABLE>圖片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_1.jpg圖片大小： 450×290二、添加背景（邊框）的代碼及方法背景（邊框）的代碼：<TABLE title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬度px; HEIGHT: 高度px"align=對齊><TBODY><TR><TD align=對齊><DIV title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬度px; HEIGHT: 高度px"></DIV></TD></TR></TBODY></TABLE>圖片、邊框的設置：圖片位置，在默認的情況下是在表格中的左上方，調整的方法是：水平方向：align="對齊" left 左 center 中 right 右，或 用不斷行空白 「 」；垂直方向：用<br>、<p></p>、 <p> </p>調整。邊框寬度，等於邊框圖的寬、高分別減去圖片的寬、高再除2。三、添加背景（邊框）的實例實例1、 添加背景背景圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_2.jpg背景圖片大小：564×366圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_3.jpg圖片大小：382×76代碼： <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_2.jpg); WIDTH:382px; HEIGHT:366px"><TBODY><TR><TD vAlign=top align=middle><DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_3.jpg); WIDTH:382px; HEIGHT: 120px"></DIV></TD></TR></TBODY></TABLE>實例2、添加邊框邊框圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg圖片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_5.jpg圖片大小： 450×325代碼： <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg); WIDTH:490 px; HEIGHT: 365px"><TBODY><TR><TD align=middle><DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_5.jpg); WIDTH: 450px; HEIGHT: 325px"></DIV></TD></TR></TBODY></TABLE>實例3、 添加背景和邊框邊框圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg背景圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_6.jpg背景圖片大小：478×331圖片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_7.jpg圖片大小： 93×141代碼： <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg); WIDTH:478 px; HEIGHT:331px"><TBODY><TR><TD align=middle> <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_6.jpg); WIDTH: 440px; HEIGHT:300px"><TBODY><TR><TD><BR><BR><BR><BR><BR><BR><BR><DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_7.jpg); WIDTH:440px; HEIGHT:141px"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
常用的貼圖標籤代碼：<img src="圖片地址"width_="寬度" height="高度"alt="說明"border="邊框寬度">區域標籤貼圖代碼：<div title="<0>"style="BACKGROUND-IMAGE: url(圖片地址); WIDTH: 寬度px; HEIGHT: 高度px"></div>一、區域標籤合成圖的原理（1）先給出如下兩張圖的代碼。圖1、圖2的代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"></div><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div>圖1、圖2的效果：從圖1、圖2的效果可看出：圖2緊接圖1的下方，兩張圖顯示在一個層面上。（2）將圖1的區域結束標籤</div>移到最後。移動</div>後的代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div></div>移動</div>後的效果：從移動</div>後的效果可看出：圖2疊加在圖1的上面，位於圖1的左上方，兩張圖在兩個層面上。以上還不難看出：圖1成了圖2的背景，這就是製作背景的原理。在此基礎上再對圖2進行垂直、水平位置的調整，圖1成了圖2的邊框。 調整圖2位置的方法，請看下一步。（3）調整圖片位置與文字位置設置的方法相同。圖片在默認的情況下是在左上方，調整位置方法是：水平方向：align="位置" left 左 center 中 right 右，或 用不斷行空白 「 」；垂直方向：可用<br>、<p></p>、 <p> </p>調整。位置調整後的代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"><BR><div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div></div></div>位置調整後的效果：從位置調整後的效果可看出：如圖1是做邊框的，邊框寬度等於圖1的寬、高分別減去 圖2的寬、高再除2。上面，介紹了用區域標籤，可以使圖片疊加，疊加後的層次為兩層。下面介紹圖片可疊加多層，並能在疊加的某一層上放多張圖片。二、多層疊加合成圖三層疊加圖代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"><BR><div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><div align=left><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"></div> </div></div></div></div>三層疊加圖效果：在某一層上放多張圖的代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_4.jpg); WIDTH: 540px; HEIGHT: 440px"><BR><div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_5.jpg); WIDTH: 500px; HEIGHT: 400px"><div align=right><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_6.jpg); WIDTH: 150px; HEIGHT: 127px"></div></div><div align=left><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_7.jpg); WIDTH: 70px; HEIGHT: 70px"></div><BR><BR><BR><BR><BR><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"> </div></div> </div></div></div>在某一層上放多張圖的效果：加上移動標籤的代碼：<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_4.jpg); WIDTH: 540px; HEIGHT: 440px"><BR><div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_5.jpg); WIDTH: 500px; HEIGHT: 400px"><MARQUEE scrollAmount=10 ><div align=right><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_6.jpg); WIDTH: 150px; HEIGHT: 127px"></div></div></MARQUEE><MARQUEE scrollAmount=14 direction=right ><div align=left><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_7.jpg); WIDTH: 70px; HEIGHT: 70px"></div><BR><BR><BR><BR><BR><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"></div></div></MARQUEE></div></div></div>加上移動標籤的效果：特別提醒：目前，網易博客留言欄、回復欄，還不能使用移動代碼。三、添加圖片邊框的方法添加一張圖片邊框的代碼：<div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_8.jpg); WIDTH: 480px; HEIGHT: 420px"><BR><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_9.jpg); WIDTH: 450px; HEIGHT: 380px"></div></div></div>添加一張圖片邊框的效果：添加兩張圖片邊框的代碼：<div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_10.jpg); WIDTH: 430px; HEIGHT: 900px"><BR><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_11.jpg); WIDTH: 400px; HEIGHT: 340px"></div><BR><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_12.jpg); WIDTH: 400px; HEIGHT: 500px"></div></div></div>添加兩張圖片邊框的效果：注意：使用<div></div>標籤編輯圖片雖較簡單，但也存在不少缺點：1、定位不精確。尤其是垂直定位，向下移動一次最小是一個<br>，相當於20px.。2、版面不穩定。同一編輯，有時在日誌、留言欄和HTML編輯器中的效果不一樣。3、不能直接編製邊框。不能象表格標籤哪樣可直接編製邊框，效果也不太理想。
推薦閱讀：
※滿地的衣服，就這麼奇蹟的消失了……
※獵頭挖人都有什麼技巧？
※舒適柔軟書房的軟裝技巧
※吳寒笛：在套路過剩的年代，堅持可能是唯一的技巧
※法國面具男鬼步舞是什麼風格？附鬼步舞教學心得技巧