学习新代码快乐做日志(半成品)

个人日记

最新制作代码音画日记的主要代码
 
说     明
 
最近我发觉很多朋友制作的代码音画日记其图象都是变形失真的,主要是所使用的代码已经老化和陈旧,不适应现在腾讯所推出的日记的代码功能。前不久我发表的《最新滚动图片代码》多次被搞乱,有的代码失灵。为了使大家能很好的进行代码音画制作,我把制作代码音画的主要代码进行了整理,废除了那些有害的部份,恢复了失灵的功能,在这里发表,希望大家能喜欢。这些代码都是我一款一款的试验审查过的,请放心使用。
温馨批示:现在腾讯推出的日记功能会产生废代码,使日记出现半边,
遇到这种情况,你就把代码中产生的废代码删除,牢记最后一个不要删,
记住这个代码:
</table>
这个就是日记中产生的废代码,但它也不是纯粹是废的,多余的就成了废的
了,记住最后一个不要删,同时牢记这个代码。

 
-----------------------------------------------------
一、万能日记背景代码
 

<table title=代码创作《幽静家园》祝你快乐 style="BACKGROUND-IMAGE: 
url(背景素材)" borderColor=#cccccc cellSpacing=20 cellPadding=20 
width="100%" align=center bgColor=#ffffff border=0><TR><TD height=日记长度>
在这里上传图片代码、文字代码、定位代码,然后把背景素材地址、图片地址粘贴进代码,把日记长度、文字写进
代码里。具体制作请参阅:《怎样制作HTML代码音画日记教程(九)》,制作完成后把这里的字删掉就行了。
</TD></TR></TBODY> </table>
查看使用方法:http://user.qzone.qq.com/2535904711/blog/1332136253
 
二、羽化图片代码(包括定位在内)
 
(静止的)

隔离代码
单一的
 
<br/>    </p>       </div>         </FONT>        </STRONG>      </table> 
      
组合的
 
</FONT></p>             </FONT></div>           </STRONG></FONT></p>
 
<P style="MARGIN: 0px"></p>

复合似组合的

</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>

</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>
</div></FONT><div></div><div></div>
<P style="MARGIN: 0px" align=center><br/>
&nbsp;</p>
 
</FONT></p></B></div>
<CENTER></CENTER><P style="MARGIN: 0px">&nbsp;</p>
<div></div><div></div><div></div>
</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>
<div></div></FONT><div></div></div></div>
<P style="MARGIN: 0px" align=center><br/>&nbsp;</p>

 
 
一张图片的代码
 
<DIV style="POSITION: absolute; TOP: 50px; LEFT: 50px">
<CENTER><IMG style="FILTER: alpha(opacity=100,style=3);
WIDTH: 855px; BACKGROUND: none transparent scroll
repeat 0% 0%" alt=图片 src="图片地址"></CENTER>


两张图片的代码
 
<div style="POSITION:absolute;TOP:150px;LEFT:0px"><CENTER><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=300>&nbsp;
<IMG style="FILTER: alpha(opacity=100,style=2)" src="图片地址" width=300></CENTER>
三张图片的代码
 
<div style="POSITION:absolute;TOP:150px;LEFT:0px"><CENTER><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=250>&nbsp;<IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=250><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=250></CENTER>
 
 
四张图片的代码

<div style="POSITION:absolute;TOP:150px;LEFT:0px"><CENTER><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=200>&nbsp;<IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=200><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=200><IMG style=
"FILTER: alpha(opacity=100,style=2)" src="图片地址" width=200></CENTER>
 
 
(动态的)
 
单张图片向右滚动的代码<div style="POSITION:absolute;TOP:150px;LEFT:0px">
<table width="890" align="center">
<TBODY><TR><TD style="FILTER:flipH"><MARQUEE>
<table align="center">
<TBODY><TR><TD><P align="center"></p>
<IMG style="FILTER:alpha(opacity=400,style=2)" src="图片地址"
idx="向右图片" background:none="background:none"> </TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></TD></TR></TBODY>
单张向左滚动的代码
<div style="POSITION:absolute;WIDTH:890px;TOP:810px;LEFT:0px"><MARQUEE>
<div style="WRITING-MODE:lr-tb" align="center">
<P opacity="100,style=3);" alt=" " background:="background:" width:="width:" none="none" transparent="transparent" scroll="scroll" repeat="repeat"><IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:450px;BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址"> </p></div></MARQUEE><br/></div>




 
单张图片双向滚动代码
 

<div style="POSITION:absolute;TOP:-100px;LEFT:0px">
<div style="FILTER:flipH;WIDTH:1750px"><MARQUEE>

<IMG style="FILTER:alpha(opacity=400,style=2);WIDTH:670px;BACKGROUND:none transparent scroll

repeat 0% 0%;background-color:transparent" border="0" alt="向右图片" src="图片地址"> </MARQUEE></div><div style="POSITION:absolute;

WIDTH:870px;HEIGHT:670px;TOP:0px;LEFT:5px"><MARQUEE>
<div style="WRITING-MODE:lr-tb" align="center">

<P style="MARGIN:0.7em" opacity="100,style=2);" repeat="repeat" scroll="scroll"

transparent="transparent" none="none" width:="width:"

background:="background:" alt=" "><IMG style="FILTER:

alpha(opacity=100,style=2);WIDTH:670px;BACKGROUND:none

transparent scroll repeat 0% 0%;background-color:transparent" alt="向左图片" src="图片地址"> </p>
</div></MARQUEE></div></div>

 

制作效果http://user.qzone.qq.com/2535904711/blog/1344523603

 

多张图片双向滚动代码

 

<div style="POSITION:absolute;WIDTH:1550px;HEIGHT:850px;TOP:0px;LEFT:0px">
<MARQUEE><div style="WRITING-MODE:lr-tb" align="center">
<P alt=" " opacity="100,style=3);" repeat="repeat" scroll="scroll" transparent="transparent" none="none" width:="width:" background:="background:">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="向左图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址"> <IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
</p></FONT><P></p></B></div>
<div style="POSITION:absolute;TOP:0px;LEFT:0px">
<div style="FILTER:flipH;WIDTH:2050px">
<MARQUEE><IMG style="FILTER:alpha(opacity=400,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" border="0" alt="向右图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<IMG style="FILTER:alpha(opacity=100,style=2);WIDTH:240px;
BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" alt="图片" src="图片地址">
<P></p></FONT><P></p></B><div></div>
<CENTER></CENTER><P style="MARGIN:0px"></p>
<div></div><div></div><div></div>
</STRONG></FONT></FONT><P style="MARGIN:0px"></p>
<div></div></FONT><div></div><div></div><div></div>

 

制作效果http://user.qzone.qq.com/2535904711/blog/1345022336

 

非羽化单张图片向中合拢的代码 

 

<div style="POSITION:absolute;TOP:250px;LEFT:0px">
<table width="890" align="center">
<TBODY><TR><TD style="FILTER:flipH" width="600"><MARQUEE>
<table width="600" align="center">
<TBODY><TR><TD><P align="center"></p>
<table align="center">
<TBODY><TR><TD><IMG style="BACKGROUND:none transparent
scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="右"> </TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></TD></TR></TBODY>
<div style="POSITION:absolute;TOP:550px;LEFT:0px"></div>
</TD></TR></TBODY></TD></TR></TBODY>
</MARQUEE></TD><TD width="600"><MARQUEE>
<table width="600" align="center">
<TBODY><TR><TD><P align="center"></p>
<table align="center">
<TBODY><TR><TD><IMG style="BACKGROUND:none transparent
scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="左"> </TD></TR></TBODY><P style="MARGIN:0px"></p></FONT>
 

制作效果http://user.qzone.qq.com/2535904711/blog/1345542836 

 

羽化的单张图片向中合拢的代码

 

<div style="POSITION:absolute;TOP:150px;LEFT:0px">
<table width="890" align="center">
<TBODY><TR><TD style="FILTER:flipH" width="600"><MARQUEE>
<table width="600" align="center">
<TBODY><TR><TD><P align="center"></p><table align="center">
<TBODY><TR><TD><IMG style="FILTER:alpha(opacity=400,style=2)" 
src="图片地址" idx="向右图片" background:none="background:none"> 
</TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></TD></TR></TBODY>
<div style="POSITION:absolute;TOP:550px;LEFT:0px"></div>
</TD></TR></TBODY></TD></TR></TBODY>
</TD></TR></TBODY></MARQUEE></TD><TD width="600"><MARQUEE>
<table width="600" align="center">
<TBODY><TR><TD><P align="center"></p><table align="center">
<TBODY><TR><TD><IMG style="FILTER:alpha(opacity=400,style=2)" 
src="图片地址" idx="向左图片" background:none="background:none"> 
</TD></TR></TBODY><P style="MARGIN:0px"></p>
</FONT><div></div>

非羽化多张图片向中合拢代码

 

<div style="POSITION:absolute;TOP:0px;LEFT:0px">

<table width="800" align="center"><TBODY><TR><TD style="FILTER:flipH" width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD><IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="1"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="2"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="3"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="4"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="5"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="片地址" idx="6"></TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></table>
</TD></TR></TBODY></table></MARQUEE></TD><TD width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD><IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="-1"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="-2"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="片地址" idx="-3"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="-4"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="-5"> <IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent" src="图片地址" idx="-6"></TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></table></TD></TR></TBODY></table>
</MARQUEE></TD></TR></TBODY><div></div></TD></TR>

</TBODY><P></p><div></div>
</TR></TBODY><P></p><div></div><TBODY><TR><TD></TD><TR>

</TR><TBODY></TBODY>
</table><table><TBODY></TBODY><div></div>

 

 制作效果http://user.qzone.qq.com/2535904711/blog/1346295041

 

多张羽化图片向中合拢的代码

 

<div style="POSITION:absolute;TOP:0px;LEFT:0px">

<table width="800" align="center"><TBODY><TR><TD style="FILTER:flipH" width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD>

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="1">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="2">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="3">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="4">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="5">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="片地址" idx="6"></TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></table>
</TD></TR></TBODY></table></MARQUEE></TD><TD width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD>

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="-1">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="-2">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="片地址" idx="-3">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="-4">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="-5">

<IMG style="FILTER:alpha(opacity=400,style=2)"  src="图片地址" idx="-6"></TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></table></TD></TR></TBODY></table>
</MARQUEE></TD></TR></TBODY><div></div></TD></TR>

</TBODY><P></p><div></div>
</TR></TBODY><P></p><div></div><TBODY><TR><TD></TD><TR>

</TR><TBODY></TBODY>
</table><table><TBODY></TBODY><div></div>

 

 

单张图片从中间向两边分开

 

<div style="POSITION:absolute;TOP:0px;LEFT:0px">
<div style="WIDTH:533px"><MARQUEE>
<table style="BACKGROUND-IMAGE:url(图片地址);FILTER:alpha(opacity=850,style=3)" title="l图片"

borderColor="#cccccc" cellPadding="0" width="533" bgColor="#000000" align="center" height="700"><TBODY><TR><TD></TD></TR></TBODY>
</table></MARQUEE></div>
<div style="POSITION:absolute;TOP:0px;LEFT:534px">
<div style="FILTER:flipH;WIDTH:533px"><MARQUEE>
<table style="BACKGROUND-IMAGE:url(图片地址);FILTER:alpha(opacity=850,style=3)" title="图片"

cellSpacing="0" borderColor="#cccccc" cellPadding="0" width="533" bgColor="#000000" align="center" height="700"><TBODY><TR><TD></TD></TR><div>
</div></TBODY></table></MARQUEE></div></div></div>

 

制作效果http://user.qzone.qq.com/2535904711/blog/1347263177

 

三、定位代码
(一)
<DIV style="POSITION: absolute; TOP: 150px; LEFT: 50px">
 (二)
 <div style="POSITION: absolute; WIDTH: 680px;  TOP: 650px; LEFT: 70px">
(三)
<div style="POSITION: absolute; WIDTH: 500px; HEIGHT: 520px; TOP: 750px; LEFT: 300px">

 
怎样制作HTML代码音画日记教程(八)
 
说明
 
我的教程已经发表七讲了,今天给大家讲解一个在制作中最重要的问题:如何使用隔离代码,
是一个非常重要的问题。有些图片、文字与定位代码不兼容,会使制作产生混乱现象,甚
至面目全非。遇到这种情况很多人是没办法的,只得长期使用一种日记代码,一种文字。
 
 
第八讲   
怎样使用隔离代码
 
隔离代码就是用代码把上面的图片和文字与下面的图片和文字隔离开来,使它们不会互相
生影响。隔离代码也叫结束代码,用在一段代码的最后,表示这段代码的功能已经结束。由于
有些图片和文字比较复杂,一般的结束代码却结束不了,而形成上下影响,这就须要使用复杂
而高级的结束代码。结束代码就是用在一段代码的最后,故称为结束代码。结束代码很多种
形式:有最简单的,有一般的,有较复杂和最复杂的;有单一的、组合的、复合似组合的等:
 
单一的
 
<br/>    </p>       </div>         </FONT>        </STRONG>      </table> 
      
组合的
 
</FONT></p>             </FONT></div>           </STRONG></FONT></p>
 
<P style="MARGIN: 0px"></p>

复合似组合的

</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>

</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>
</div></FONT><div></div><div></div>
<P style="MARGIN: 0px" align=center><br/>
&nbsp;</p>
 
</FONT></p></B></div>
<CENTER></CENTER><P style="MARGIN: 0px">&nbsp;</p>
<div></div><div></div><div></div>
</STRONG></FONT></FONT><P style="MARGIN: 0px"></p>
<div></div></FONT><div></div></div></div>
<P style="MARGIN: 0px" align=center><br/>&nbsp;</p>
 
 

有人恐怕认为上面的复合似组合代码是些废代码,这你就错了,它的功能非常神奇,一篇
面目全非的日记只要一用上它立马就恢复了正常。你看下面这个例子:这是祝《浪漫秀儿》
生日贴,我在上传日记文字时,就出现了下面这个样子,真正的面目全非了。我赶紧用了
一组最复杂高级的结束代码,马上就正常了。这款高级复杂的结束代码,是我在当时制作
《庆祝元旦》这篇日记时创建的。当时因为输入一款透明字体,把日记全搞

文章评论