网易博客素材、教程、代码基地

请引用的朋友，不要删除链接，谢谢合作

日志

关于我

佳人素材教程基地

和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。

文章分类

【音画*教程】博客音画常用代码集锦(娟子整理)

2011-11-12 16:09:50| 分类：【大图教程】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自娟子《博客音画常用代码集锦(娟子整理)》

一、文字和图片链接代码

1·文字链接代码

“相关地址”处粘贴一篇日志的网址；“相关文字”处填该篇日志的名称。

2·图片链接代码：

“图片链接地址”出黏贴图片的地址；

3·文字和图片一起连接的代码：

效果如下：

博客音画常用代码集锦 - 娟子 - 海之女怎样在日志或首页添加背景音乐

4·多次反复链接

如编排日志目录或导航就按上述方法依次反复做几次，可以编上序号或放如小图标。

每个日志标题的换行，就是在文字链接代码的前面加一个换行代码<br>

如：<br><a href="相关地址" target="_blank">相关文字</a>

如果想字大一点，那就在所有代码的前后各加一个放大字体的代码<h2>

如: <h2><a href="相关地址" target="_blank">相关文字</a><h2>

二·图片移动连接代码

原始代码：

一、代码：

<A href="http://blog.163.com/ciq080416nfk@126/" target=_blank><IMG height=128 src="图片地址1"

width=128 border=0></A>

......

</MARQUEE></DIV>

二、说明

direction=left 是图片的滚动方向，可以有四个方向，分别是left right up down，向左走，

direction=left 可以省去。来回走是把direction= 换成behavior=alternate。

width="100%" height="128" 这是模块整体的宽和高，在网易博客中宽度就设定为100%

不用变，可以跟据模块摆放的位置自适应。高度可以跟据需要进行调整。

第一张图片前的这组命令和以后图片前的<A>是同一组命令，区别是加入了 href=""是点击

图片打开指定链接网页，也可以在后面的图片上都加上链接。

target=_blank 是在新窗口打开的意思，没有这个命令就是在当前页打开。

<A href="" target=_blank>也可不用。

src="图片地址"，是调用这个链接地址的图片。

第一个图片链接后面都有一个 width=128，是这张图片的宽度，是需要跟据自己的图片大小

进行调整的。

三·如何实现图片水中倒影效果代码

原始代码：

四·几种图片和文字的排列的代码

1、图片在左文字在右

原始代码：

<P><IMG height=图片高度 src="图片地址" width=图片宽度 align=left border=0><FONT face=Arial> 文字<BR> </FONT><BR clear=left></P>

2、图片在右文字在左

原始代码：

<P><IMG height=图片高度 src="图片地址" width=图片宽度 align=right border=0><FONT face=Arial> 文字<BR> </FONT><BR clear=left></P>

3、图片在中间文字在二边

原始代码：

4、图片在二边文字在中间

原始代码：
<DIV>
<DIV style="DISPLAY: none"> </DIV><IMG style="FLOAT: right" src="右图网址" border=0><FONT color=#050b17> </FONT></DIV>
<DIV>
<DIV>
<DIV>
<P style="TEXT-INDENT: 2em" align=left><FONT color=#050b17><IMG style="FLOAT: left" src="左图网址" border=0></FONT></A><FONT color=black>这里写文章的全文</FONT> </P>
<P style="TEXT-INDENT: 2em"></P>
<P style="TEXT-INDENT: 2em"><FONT color=#050b17></FONT></P> 
<P></P></DIV></DIV></DIV>
<DIV></DIV>

五·日志题图应用与代码

效果图：

日志题图素材

代码如下

应用代码说明

width=600为图片宽度值 height=200为图片中图案部份的高度值（根据实际图片设定）

background=图片地址为题图的图片链接地址

bgcolor=#000000 为图片底部相应颜色（为使整体衔接请选取相同或相近颜色） color=#0000ff size=5 标题文字颜色与大小 <b> 文字加粗

如果要使文字居中可以在所有代码前加<center> 所有代码后面加</center>或者是在<TD>里加入align=center 调整文字位置也可使用空格键来进行调整。

如果想使用日志边框的话，只要在所有代码之前加入您选择的边框代码（上面的示例都在该代码的基础上加了三层边框）

六·加图片的播放器代码如下：

1、（显示播放器）

TABLE align=center bgColor=#000000 border=22 borderColor=#808080 cellPadding=4 cellSpacing=10 width="88%">
<TBODY>
<TR>
<TD>
<P align=center><IMG src="图片网址"></P>
<P align=center><EMBED src=音乐网址 style="FILTER: invert(); HEIGHT: 28px; WIDTH: 400px" type=audio/x-ms-wma>
<DIV></DIV>

2、（隐藏播放器代码）

3、添加日志背景音乐的几种方法（不显示播放器代码如下：）

（1）<EMBED hidden=true src= [替换mp3地址] type=application/octet-streamautostart="true"

loop="true"> （隐藏播放）

（2）<EMBED src=“音乐路径” width=0 height=0 autostart="true" >（隐藏播放）

（3）<embed src="背景音乐网址" hidden="true" autostart="true" loop="true">（隐藏播放）

（4）<embed src="mp3歌曲网址" autostart="false" width="283" height="45">（显示播放器）

说明：--------hidden="true"表示隐藏播放，即不显示播放器的外观，若要想显示，把"true" 替换

为"false"即可，这样为默认是最小化播放，若还想具体显示播放器的大小，另加上height="高度值"

width="宽度值" 就可以了。

-------autostart="true"表示当前页一载入则自动播放，若不希望播放改为autostart="false

--------hidden="true"表示隐藏播放，即不显示播放器的外观，若要想显示，把"true" 替换

为"false"即可，这样为默认是最小化播放，若还想具体显示播放器的大小，另加上height="高度值"

width="宽度值" 就可以了。

(5).插入音乐地址的修改

代码格式都一样,你只要修改音乐地址就可以了

高度height=200 宽度width=200

是mp3就改height=0 宽度width=0

七·寻找FLASH地址方法？如何让你的FLASH作品打开更快？
1、寻找FLASH地址方法
经常看到朋友想转载FLASH,又不知道怎样找到地址,早上看到了这篇文章,希望能够对您有所帮助.

⑴如果地址栏里的地址是以http://开头，以.swf结尾的，那么一般这就是此flsah的有效地址，直接复制就可。

⑵如果该网站提供全屏欣赏，那么该flash的有效地址也很好找了：
在此flash的全屏欣赏上，鼠标右键点击，选中“属性”，复制下其地址即可。

⑶在flash播放当前页，点击查看→查看源文件，这时会跳出一个记事本，接着，在以记事本为当前窗口的前提下，
按键盘上的f3（或点击记事本的编辑→查找），在查找中输入.swf，然后将.swf和其前面的一串地址复制，切记：http://开头，".swf结尾".

(4)、在以上方法都无效的情况下，看见FLASH以后，就在当前网页点IE的选项-INTERNET选项-INTERNET临时文件夹-设置-查看文件，然后搜索SWF文件，就能找到相应的文件，并得到地址。

(5) 、用超级旋风下载时能见到地址。

2、如何让你的FLASH作品打开更快

如何解决你动画作品打开慢这个问题呢？其实很简单也很容易解决这个困绕许多朋友的问题。我们只需要用一套编辑好的代码就可以了。下面的这组代码就是用来发表动画的，用它来发表你的作品就会发现比你用按钮插入发表打开的速度要快许多了。

可用代码如下：

我们通过比较可以发现这组代码和上面按钮插入产生的代码有很大的区别，在下面这组代码里明显少了许多那些多余的代码了。电脑系统是通过阅读你的命令来打开你的作品，那么代码越短当然阅读的时间就越短，这样你作品的打开速度也就越快了。因此，在这里建议大家在发表你的动画作品时最好不要选择用后台的按钮来插入发表你的作品。而用这组代码去发表你会发现起到事半功倍的效果呢！

下面的代码大家可选择性的使用：

代码1：此例动画背景为透明背景

代码2：此例动画背景为不透明背景

代码3：此代码为宽度超过768的发帖代码

代码4：此例动画为全屏定位展示（此代码必须插入在<TD>的后面）

注明：

wmode="transparent" 为背景透明

quality="high" 为高品质展示

LEFT: 100px; 为调整动画横向距离

TOP: 200px; 为调整动画纵向距离

八? 如何实现图片水中倒影效果

原始代码：

九·背景图加框再加两层flash的合成效果（附代码）

【红色是背景图地址，紫色是枫叶flash地址，绿色是下雨的flash地址。此图共用了两层flash，而且背景图的高度和宽度都要和flash的高度和宽度同步，否则图片效果不好看】

10·照片制作拍立得效果

代码如下：

<DIV align=center>
<TABLE borderColor=#f0f0f0 height=1260 cellSpacing=25 cellPadding=0 width=600 bgColor=#fcfcfc border=60>
<TBODY>
<TR>
<TD>
<P align=center></P>
<DIV style="BORDER-RIGHT: #999999 0px solid; BORDER-TOP: #999999 0px solid; OVERFLOW: visible; BORDER-LEFT: #999999 0px solid; BORDER-BOTTOM: #999999 0px solid"><IMG src="http://img617.ph.126.net/bu8LNmIBazw3FGtfmrTe8A==/1662672687431845966.jpg" width=400></DIV>
<DIV style="BORDER-RIGHT: white 10px solid; BORDER-TOP: white 10px solid; OVERFLOW: visible; BORDER-LEFT: white 10px solid; BORDER-BOTTOM: white 20px solid">
<DIV style="OVERFLOW: hidden; HEIGHT: 4px"></DIV></DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">昨日的美丽来自你我的相遇，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">今日的欢愉是有你的惦记，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">明日的明日我依然会把你想起。<BR><B>娟子<BR>2011/04/10</B></DIV></TD>
<TR>
<TD>
<P align=center></P>
<DIV style="BORDER-RIGHT: white 10px solid; BORDER-TOP: white 10px solid; OVERFLOW: visible; BORDER-LEFT: white 10px solid; BORDER-BOTTOM: white 20px solid">
<DIV style="BORDER-RIGHT: #999999 0px solid; BORDER-TOP: #999999 0px solid; OVERFLOW: visible; BORDER-LEFT: #999999 0px solid; BORDER-BOTTOM: #999999 0px solid"><IMG src="http://img612.ph.126.net/7nizBiFKXKtLnLe55IAi5w==/1977361711394226577.jpg" width=400></DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 4px"></DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">虽然这仅仅是心灵的友谊，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">难以现实，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">却带给我们许许多多快乐的感受和美好的回忆，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">这就足矣，我会珍惜。<BR><B>娟子<BR>2011/04/10</B></DIV></DIV>
<DIV></DIV>
<DIV></DIV>
<P></P></TD></TR>
<TR>
<TD>
<P align=center></P>
<DIV style="BORDER-RIGHT: white 10px solid; BORDER-TOP: white 10px solid; OVERFLOW: visible; BORDER-LEFT: white 10px solid; BORDER-BOTTOM: white 20px solid">
<DIV style="BORDER-RIGHT: #999999 0px solid; BORDER-TOP: #999999 0px solid; OVERFLOW: visible; BORDER-LEFT: #999999 0px solid; BORDER-BOTTOM: #999999 0px solid"><IMG src="http://img457.ph.126.net/IF-cCtejfDBmitdZ18PV9A==/2499216318215036084.jpg" width=400></DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 4px"></DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">愿这份美丽延续，</DIV>
<DIV style="FONT: 8pt/180% verdana; COLOR: #999999; LETTER-SPACING: 1px; TEXT-ALIGN: right">让这份友谊真挚！<BR><B>娟子<BR>2011/04/10</B></DIV></DIV></TD></TR></TBODY>

11·怎样制作彩色雾化图片的效果

1、怎样制作彩色雾化图片的效果

（温馨提示：黄色为右边框颜色，粉红色为上边框颜色，绿色为背景颜色，浅黄色为左边框颜色，白色为下边框颜色，红色为图片地址，height=450 （图片高度），width=600（图片宽度）。以上可以根据您自己的要求进行调整。）

2、怎样给FLASH动画添加彩色雾化效果

通用代码复制处

（温馨提示：绿色为背景颜色，红色为FLASH动画地址，width=580（雾化控制高度） height=485 （图片高度），width=560（图片宽度）。以上可以根据您自己的要求进行调整。）

此FLASH动画地址： http://wwww.6000y.com/1037215400/donghua/35.swf

12·图片加框DIY

一、给图片加颜色框：

1、代码如下:

说明：borderColor=#90fc00为边框颜色，具体颜色可参照——《 HTML颜色代码表》
border=6为边框厚度，width=150为边框宽度，根据图片宽度设定，边框高度一般不用写入，由图片自行撑展，height=200 width=150为图片高度与宽度，可以减少或增加数据来调整图片的大小。

2、粒状边框代码:

<div style="text-align: center"><img style="filter: progid:DXImageTransform.Microsoft.Glow(color=#009966,strength=20" alt="" src="图片地址"></div>

color=#009966为边框颜色strength=20为边框厚度

3、立体边框效果代码:

<TABLE style="FILTER: progid:dximagetransform.microsoft.shadow(color:#00DD00 ection:145,strength:15)" cellSpacing=10 cellPadding=15 width=150 border=5>
<TBODY>
<TR>
<TD vAlign=center align=middle><IMG src="图片地址"></TD></TR></TBODY></TABLE>
框体颜色与厚度大家可自行调整

二、给图片加素材框：

加入素材框代码1:

说明：图片与边框只能选择规格大小相近的，height=边框高度记得写上，图片才能完整显示。更多的相框素材请看——《相框素材库》

加入素材框代码2:

说明：这款代码优点就是大图片通过调整也能加入小边框，但如果边框为不规则，框内图片很难调整，如效果图把边框四个角的红心遮住了，cellSpacing=8为边框厚度，相应的框内图片大小根据比例调整。

加入素材框代码3:

说明：这款代码与上款是一样的，不过这款的边框背景图片选择不一样，这款选取闪底图片作为框体，而且框内图片大小没有限制。
闪底素材请看——《背景图片素材汇总》

十三·如何为CSS图片加透明FLASH

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=1)" width=250 background=图片地址 height=250>
<EMBED align=right src=http://imgfree.21cn.com/free/flash/4.swf width=250 height=250 type=application/octet-stream quality="high" wmode="transparent"></EMBED></TD></TR></TOBDY></TBODY></TABLE>

注解：

鲜绿色地方style=“1”表示图片CSS滤镜特效参数（参数1到3、4为图片还原）

橙色地方width=“250”表示图片宽度、height=“250”为图片高度、红色地方“图片地址”表示此处粘贴图片地址。

粉红色地方“”表示FLASH地址（可以替换自己喜欢的透明FLASH地址）、蓝色地方“width=250 height=250”表示FLASH的宽度和高度（一定要和图片的宽度和高度相同）

十四?文字在雾化图片上的居中向上滚动：

<TABLE style="FILTER: Alpha(opacity=100,style=2)" height=700 width=750 background=http://img381.ph.126.net/elA7GR_c-VqaHywaJIVWxw==/1041175938853962684.jpg border=0>
<TBODY>
<TR>
<TD align=middle direction="up" spacer>
<P align=center>
<MARQUEE scrollAmount=3 scrollDelay=150 direction=up width=550 height=80>
<CENTER><FONT face=华文新楷 color=#ff4500 size=5 ffaa>只因为在人群中多看了你一眼…… <BR>再也没能忘掉你的容颜<BR>梦想着偶然能有一天再相见 <BR>从此我开始孤单地思念<BR>想你时你在天边 <BR>想你时你在眼前 <BR>想你时你在脑海<BR>想你时你在心田 <BR>宁愿相信我们前世有约 <BR>今生的爱情故事不会再改变 <BR>宁愿用这一生等你发现 <BR>我一直在你身边 <BR>从未走远。。。 <BR></FONT></CENTER></MARQUEE></P></TD></TR></TBODY></TABLE>

十五·特效图片合成代码

1、代码

<TABLE height=328 cellPadding=0 width=328 borderColor=#333333 background=图片地址 border=3>
<TBODY>
<TR>
<TD>
<DIV>
<MARQUEE scrollAmount=4 direction=down width=326 height=326>
<MARQUEE scrollAmount=4 direction=up width=326 height=326><IMG style="FILTER: alpha WIDTH: 326px; HEIGHT: 326px" height=326 src="图片地址"width=326></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>

2、代码

3、代码

4、代码

十六·如何为图片加边框

原图

1.为图片加单线边框

2.为图片加双线边框

CENTER><IMG style="BORDER-RIGHT:#ff6699 7px double; BORDER-TOP:#ff6699 7px double; BORDER-LEFT:#ff6699 7px double; BORDER-BOTTOM:#ff6699 7px double" src="图片地址"></CENTER>

3.为图片加外凸边框

<CENTER><IMG style="BORDER-RIGHT: #ff6699 18px outset; BORDER-TOP: #ff6699 18px outset; BORDER-LEFT: #ff6699 18px outset; BORDER-BOTTOM: #ff6699 18px outset" src="图片地址"></CENTER>

4.为图片加内凹边框

<CENTER><IMG style="BORDER-RIGHT: #ff6699 18px inset; BORDER-TOP: #ff6699 18px inset; BORDER-LEFT: #ff6699 18px inset; BORDER-BOTTOM: #ff6699 18px inset" src="图片地址"></CENTER>

5.为图片加脊线边框

<CENTER><IMG style="BORDER-RIGHT: #ff6699 18px ridge; BORDER-TOP: #ff6699 18px ridge; BORDER-LEFT: #ff6699 18px ridge; BORDER-BOTTOM: #ff6699 18px ridge" src="图片地址"></CENTER>

6.为图片加槽线边框

<CENTER><IMG style="BORDER-RIGHT: #ff6699 18px groove; BORDER-TOP: #ff6699 18px groove; BORDER-LEFT: #ff6699 18px groove; BORDER-BOTTOM: #ff6699 18px groove" src="图片地址"></CENTER>

7.为图片加虚线边框

<CENTER><IMG style="BORDER-RIGHT: #ff6699 4px dashed; BORDER-TOP: #ff6699 4px dashed; BORDER-LEFT: #ff6699 4px dashed; BORDER-BOTTOM: #ff6699 4px dashed" src="图片地址"></CENTER>

8.为图片加颗粒阴影特效

<CENTER><img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ff6699,strength=20)">
</CENTER>

9.为图片做黑白特效

<CENTER>
<img src="图片地址" style="filter:'gray'">
</CENTER>

10.为图片做透视特效

<CENTER>
<img src="图片地址" style="filter:'xray'">
</CENTER>

11.为图片做浮雕特效

<CENTER>
<img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Emboss()">
</CENTER>

12.图片垂直颠倒特效

<CENTER>
<img src="图片地址" style="filter:flipv">
</CENTER>

13.图片水平反转特效

<CENTER>
<img src="图片地址" style="filter:fliph">
</CENTER>

14.图片色彩渐变特效

<CENTER><img src="图片地址" style="filter:invert">
</CENTER>

15.图片外虚内实特效

<CENTER><table style="border:3 dashed #ff6699" cellspacing="3" cellpadding="8" bgcolor="#ff6699"><tr><td bgcolor="#ff6699" width=380 height=250 align=center valign=middle><img src="图片地址"> </td></tr></table></CENTER>

16.图片立体阴影特效

<CENTER><table width=380 height=250 border=1 cellpadding="0" cellspacing="1" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#ff6699,direction:145,strength:15)"><tr><td bgcolor="#ff6699" align=center valign=middle><img src="图片地址"> </td></tr></table></CENTER>

代码分析：“<CENTER>是居中代码</CENTER>” ，粉红色地方“height=250”是图片的高度，红色地方“width=380”是图片的宽度，绿色地方“ff6699”是边框颜色代码，蓝色地方“图片地址”是图片属性地址，青绿色地方“border=1”是边格宽度。

十七·多图重叠移动代码

1、<TABLE borderColor=#ff0000 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #ff0000 20px inset; BORDER-TOP: #ff0000 20px inset; BORDER-LEFT: #ff0000 20px inset; BORDER-BOTTOM: #ff0000 20px inset">
<TABLE borderColor=#ff0000 cellSpacing=3 cellPadding=0 align=center background=闪烁边框图片地址 border=2>
<TBODY>
<TR>
<TD background=底图地址>
<MARQUEE scrollAmount=1 scrollDelay=30 direction=right width=120><IMG height=320 src="左侧移动图片地址" width=240></MARQUEE>
<MARQUEE scrollAmount=1 scrollDelay=30 width=120><IMG height=320 src="右侧移动图片地址" width=240></MARQUEE></TD></TR></TBODY></TABLE>

2、滚动图片浏览模式加播放器

<TABLE style="BORDER-LEFT-COLOR: #686868; BORDER-BOTTOM-COLOR: #686868; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #686868; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #686868; BORDER-BOTTOM-STYLE: ridge" borderColor=#686868 height=80 cellSpacing=2 cellPadding=2 width=380 align=center background=图片地址 border=6>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 align=center style="FILTER: glow(color=#00FFFF,strength=1)" width="100%">
<TBODY>
<TR align=center>
<TD>
<FONT color=#ffffff size=3>精美滚动图片欣赏</FONT></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD><MARQUEE style="WIDTH: 100%px; HEIGHT: 10px" scrollAmount=2 align="center">
<TABLE borderColor=#686868 height=80 cellSpacing=2 cellPadding=2 width=172 align=center border=1>
<TBODY>
<TR>
<TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD><TD><IMG height=172 src="图片地址" width=172></TD></TR></TBODY></TABLE></MARQUEE></TD></TR>
<TR>
<TD>
<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 380px; HEIGHT: 38px">
<TBODY>
<TR>
<TD><EMBED src=音乐地址 width=380 height=38 type=audio/mpeg panel="0" autostart="true" loop="true">
</TD></TR></TBODY></TABLE>

注解：

所有红色地方“686868”都是表示外边框颜色

粉红色地方“686868”表示内边框格线颜色

青绿色地方“图片地址”表示此处可以粘贴背景图片地址（不添加为默认透明）

橙色地方“6”表示外边框厚度

黄色地方“精美滚动图片欣赏”表示此处填写标题名称

所有“<IMG height=172 src="图片地址" width=172></TD>”都表示个图片的代码；其中：

“height=172”表示图片高度、“图片地址”表示图片地址粘贴处、“width=172”表示图片宽度，

如果要增加一组或多组图片也是增加一段“<IMG height=172 src="图片地址" width=172></TD>”这个代码就行（删除一组或多组也是这段代码）

绿色地方“音乐地址”表示此处粘贴歌曲地址、“width=380 height=38”表示播放器的宽度和高度

十八·如何在图片上写字

1.简单的单图加字效果：

代码：

<TABLE borderColor=#003333 height=250 cellSpacing=3 cellPadding=0 width=500 align=center background=http://img.ph.126.net/gdIciGofp3kjksqQh5ssbA==/3346455998113005905.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<FONT face=宋体 color=#FF0000 size=4><STRONG>添加文字或图片</STRONG></FONT></TD></TR></TBODY></TABLE>

2.单图加边加字效果：

代码：

<TABLE borderColor=#0000FF height=250 cellSpacing=3 cellPadding=0 width=500 align=center background=http://img.ph.126.net/gdIciGofp3kjksqQh5ssbA==/3346455998113005905.jpg border=6>
<TBODY>
<TR>
<TD align=middle>
<FONT face=宋体 color=#FF0000 size=4><STRONG>添加文字或图片</STRONG></FONT></TD></TR></TBODY></TABLE>

3.加上一个边框效果：

代码：

<TABLE borderColor=#003333 height=250 cellSpacing=6 cellPadding=0 width=500 align=center background=http://img234.ph.126.net/JBqe4RILyQzGxds62yQtYQ==/1406530458624698157.jpg border=12>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003333 height=250 cellSpacing=3 cellPadding=0 width=500 align=center background=http://img.bimg.126.net/photo/qmf5pNHhQ8oSRnG5YtMxfg==/3663959771842904215.jpg border=3>
<TBODY>
<TR>
<TD align=middle>
<P><FONT face=宋体 color=#FF00CC size=4>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE></TR></TBODY></TABLE>

4.还可以为你的图片加上标题色

代码：

<TABLE borderColor=#003366 height=250 cellSpacing=0 cellPadding=0 width=500 align=center border=0>
<TBODY>
<TR>
<TD align=middle bgColor=#003366 height=38><STRONG><FONT color=#ff0000 size=4>添加标题</FONT></STRONG></TD></TR>
<TR>
<TD align=middle background=http://img154.ph.126.net/g4SP_x2Ch4OlPa0HN5hiNw==/2270658637126243704.jpg height=250>
<P><FONT color=#ff00ff size=4>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE>

5.制作颜色框效果：

代码：

<TABLE style="BORDER-RIGHT: #888888 0px groove; BORDER-TOP: #888888 0px groove; BORDER-LEFT: #888888 0px groove; BORDER-BOTTOM: #888888 0px groove; BORDER-COLLAPSE: collapse" borderColor=#686868 height=250 cellSpacing=1 bgColor=#CCCCCC cellPadding=0 width=500 align=center border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#888888 height=38><STRONG><FONT color=#FFFFFF size=4>添加标题</FONT></STRONG></TD></TR>
<TR>
<TD align=middle height=250>
<P><FONT color=#151515 size=4>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE>

代码说明：

1.“height=250”表示设定图片的高度为“250”

2.“width=500”表示设定图片宽度为“500”

3.“http://img.ph.126.net/gdIciGofp3kjksqQh5ssbA==/3346455998113005905.jpg”表示为图片属性地址

4.“borderColor=#003333”表示边框框线颜色、颜色码“003333”

5.“bgColor=#003366”表示标题栏背景颜色

6.“bgColor=#CCCCCC ”表示颜色框的大背景背景色

十九·下面介绍一种保存flash动画到你电脑上的有效方法。就是用代码将flash保存到你电脑里，再将flash动画再次上传到网站上，形成新的flash地址后，你就可以永久调用，因为它已经属于你自己的了，不过版权还是属于原创者的哦。

把flash 保存到电脑里的代码：

<A href="http://files2.17173.com/zhflash/2008020665432132132132.swf" target=_blank><U><STRONG><FONT color=#ff0000 size=4>鼠标右键单击此处-目标另存为,即可把此flash下载保存到您电脑上！</FONT></STRONG></U></A>

使用说明：

1、首先将你喜欢的 flash动画地址复制到以上代码中的蓝色地址处；

2、其次将以上整体代码复制到《代码运行检测器》中，点击“代码运行”即可出现如下红色字的页面。

3、或着进入“写日志”，点击工具栏的“全部功能”，点击“< >”键，把“代码”粘贴后。再点击“< >”键，点击“发表日志”“允许访问”，即可出现如下红色字的页面。

评论这张

转发至微博

阅读(690)| 评论(6)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067087080089069083081084069072087088068087087087066082086',
              blogTitle:'【音画*教程】博客音画常用代码集锦(娟子整理)',
              blogAbstract:'   <P\><WBR\><STRONG\><FONT color=\"#ff0000\" size=\"5\" \>一、文字和图片链接代码</FONT\></STRONG\></P\>  <P\>1·文字链接代码</P\>  <P\> <a href=\"相关地址\" target=\"_blank\">相关文字</a></P\>  <P\>“相关地址”处粘贴一篇日志的网址；“相关文字”处填该篇日志的名称。</P\>  <P align=\"left\" \>2·图片链接代码：</P\>  <P align=\"left\" \> <IMG  src=\"图片连接地址\" border=0></P\>  <P align=\"left\" \>“图片链接地址”出黏贴图片的地址；</P\>  <P align=\"left\" \>3·文字和图片一起连接的代码：</P\>  <P align=\"left\" \><IMG  src=\"图片连接地址\" border=0><a href=\"相关地址\" target=\"_blank\">相关文字</a></P\>  <P align=\"left\" \>效果如下：</P\>  <P\><FONT color=\"#ff00ff\" \></FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/197311160201110124950370',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1321085390370,
              permalink:'blog/static/197311160201110124950370',
              commentCount:6,
              mainCommentCount:6,
              recommendCount:1,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/197311160201110124950370">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易博客素材、教程、代码基地

导航

日志

【音画*教程】博客音画常用代码集锦(娟子整理)

历史上的今天

最近读者

热度

评论

页脚