梦中人の梦工场

这里有爱的细雨，这里有情的倾诉。这里帮你筑梦，帮你圆梦！

日志

关于我

梦中人

喜欢做梦,从小到大,始终不变,喜欢研究,海阔天空,天文地理,喜欢交友,不分老幼,不分男女。

文章分类

教你制作音画（2）

2009-06-28 18:34:29| 分类：音画制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

伊杋叶的教你制作音画（2）

HTML做帖子技巧和代码-特效篇2

效果图一

秋风拂枫叶舞

莫道秋风无情

不见秋风起

哪得美景醉

若你懂得品位

失落也是人生中

很美的滋味

       代码如下:

<TABLE height=500 cellPadding=10 width=450 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONT color=#ff00ff>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>秋风拂  枫叶舞</STRONG></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ff00ff size=5><STRONG>莫道秋风无情</STRONG></FONT></DIV>
<DIV align=center><STRONG><FONT face=楷体_GB2312 size=5></FONT></STRONG> </DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=5><STRONG>不见秋风起</STRONG></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=5><STRONG>哪得美景醉</STRONG></FONT></DIV>
<DIV align=center><FONT size=5><FONT face=楷体_GB2312 color=#ffff00></FONT><BR></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312><FONT color=#99cc00 size=5><STRONG>若你懂得品位</STRONG></FONT></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#99cc00 size=5><STRONG>失落也是人生中</STRONG></FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 color=#99cc00 size=5><STRONG>很美的滋味</FONT></FONT></FONT></DIV></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>

        以上代码中加入了图片边框和文字向上移动居中特效。

        文字上下滚动代码：<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONT color=#ff00ff>

         注：scrollAmount=2   是控制字速，数值越大移动的字速就越快！

         关于图片上加文字移动的特效代码，大家不妨点击下面链接去参看。

        http://df-wang2008.blog.163.com/blog/static/86050678200899330258/edit/

效果图二

请停住您匆匆的脚步，感受博客学习园地家的温馨!

      代码如下：

<TABLE borderColor=#cd5c5c height=272 width=372 align=center border=2>
<TBODY>
<TR>
<TD background=http://img.blog.163.com/photo/Gfb1THwSsQbA_2K-Qdeopg==/1702642134123691492.jpg>
<MARQUEE scrollAmount=2 direction=down behavior=alternate height=272>
<MARQUEE scrollAmount=2 behavior=alternate width=372><IMG src="http://img.blog.163.com/photo/tEYUeQwnRrJnTIlJQnLEQg==/3703929218535832919.jpg">
<P align=center><FONT face=楷体 color=#ff00ee size=2 ff><B>请停住您匆匆的脚步，感受博客学习园地家的温馨!</B></FONT></P></B></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

        以上代码中加入了图片边框及flash图片和文字移动的特效。

        图片移动代码为：<MARQUEE scrollAmount=2 direction=down behavior=alternate height=272>
        文字移动代码为：<MARQUEE scrollAmount=2 behavior=alternate width=372>

        注：direction=down behavior=alternate 是指定图片上下移动碰壁反弹来回走动。

效果图三

  书山有路勤为径


学海无涯苦作舟
           唐-韩愈

成功的人是跟别人学习经验
失败的人只跟自己学习经验
                 ---警句

      代码如下：

<TABLE style="WIDTH: 650px; HEIGHT: 500px" borderColor=#ff0000 height=500 width=650 align=center border=2>
<TBODY>
<TR>
<TD

background=http://img.blog.163.com/photo/MXj5gxX0YhudVMPCW84z7Q==/1701797709193527848.jpg>
<DIV align=right>
<MARQUEE style="WIDTH: 650px; HEIGHT: 500px"

scrollAmount=3 scrollDelay=100 behavior=slide loop=1 height=500>
<MARQUEE style="WIDTH: 100%; LINE-HEIGHT: 100%;

WRITING-MODE: tb-rl" scrollAmount=3 scrollDelay=100 direction=up width="100%" height=500>
<P align=left><FONT style="FONT-SIZE: 40pt; FILTER: WIDTH: 100%; COLOR: #ff0000;

LINE-HEIGHT: 100%; FONT-FAMILY: 隶书" color=#ff0000>  

书山有路勤为径</FONT></P>
<P align=left><FONT face=@隶书 color=#ff0000>        

</FONT><FONT style="FONT-SIZE: 40pt; FILTER: WIDTH: 100%; COLOR: #ff0000;

LINE-HEIGHT: 100%; FONT-FAMILY: 隶书"><BR></FONT><FONT style="FONT-SIZE: 40pt; FILTER:

WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 100%; FONT-FAMILY: 隶书"> 

学海无涯苦作舟</FONT><FONT style="FONT-SIZE: 40pt; FILTER:

WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 100%; FONT-FAMILY: 隶书"><BR>           

<FONT color=#ff00ff size=6>唐-韩愈</FONT></FONT></P>
<P align=left><FONT style="FONT-SIZE: 40pt; FILTER: WIDTH: 100%;

COLOR: #ff0000; LINE-HEIGHT: 100%; FONT-FAMILY: 隶书"><IMG style="DISPLAY: block; TEXT-ALIGN: center" src="http://img.blog.163.com/photo/wIszfzuIvu74FAN6ViSC-Q==/4519643701043415525.jpg">

</FONT></P>
<P align=left><FONT style="FONT-SIZE: 30pt; FILTER: WIDTH: 100%;

COLOR: #ff0000; LINE-HEIGHT: 100%; FONT-FAMILY: 隶书" color=#ff0000>

成功的人是跟别人学习经验</FONT> <FONT face=@隶书 color=#ff0000></FONT>

<FONT style="FONT-SIZE: 30pt; FILTER: WIDTH: 100%; COLOR: #ff0000;

LINE-HEIGHT: 100%; FONT-FAMILY: 隶书"><BR></FONT><FONT

style="FONT-SIZE: 30pt; FILTER: WIDTH: 50%; COLOR: #ff0000; LINE-HEIGHT: 100%;

FONT-FAMILY: 隶书">失败的人只跟自己学习经验</FONT><FONT

style="FONT-SIZE: 30pt; FILTER: WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 100%;

FONT-FAMILY: 隶书"><BR>        

         

<FONT color=#ff00ff size=6>---警句 </FONT></FONT></P></FONT></FONT>
<P></P></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>

        以上代码应用了文字竖排向右移动和图片混排效果。

效果图四

谢谢到访我来看望朋友请朋友欣赏★《让我淡淡的牵挂着你》★

天上最美的是星星，人间最美的是真情，外表留给人的是印象，内心留给人的是感情，珍惜了今天你就拥有了明天，愿你开怀地笑，温柔地睡！

        代码如下:

<TABLE style="WIDTH: 650px; HEIGHT: 500px" borderColor=#ffff00 height=500 width=650 align=center border=2>
<TBODY>
<TR>
<TD background=http://img.blog.163.com/photo/MXj5gxX0YhudVMPCW84z7Q==/1701797709193527848.jpg>
<DIV align=right>
<MARQUEE scrollAmount=5 behavior=alternate width=500 alt="伊杋叶音画">
<P><IMG src="http://img.blog.163.com/photo/sBVerUvRIwm9rRZYAuuvgg==/4268286546840810771.jpg"><FONT color=#ff0000>  </FONT><FONT color=#ff00ff size=6><B><FONT face=楷体_GB2312><FONT color=#ff0000>谢谢</FONT><FONT color=#99cc00></FONT>到访 <FONT color=#00ccff>我来</FONT><FONT color=#808000>看望</FONT><FONT color=#00ff00>朋友 </FONT><FONT color=#ff0000>请</FONT><FONT color=#00ffff>朋友</FONT><FONT color=#ffff00>欣赏</FONT><FONT color=#ff0000>★</FONT>《<FONT color=#008080>让我</FONT><FONT color=#0000ff>淡淡<FONT color=#ff6600>的牵</FONT><FONT color=#008000>挂着</FONT></FONT><FONT color=#ffcc00>你</FONT>》<FONT color=#ff0000>★</FONT></FONT></B><IMG src="http://img.blog.163.com/photo/sBVerUvRIwm9rRZYAuuvgg==/4268286546840810771.jpg"></FONT></P>
<P><FONT color=#ff00ff size=6></FONT> </P></MARQUEE>
<MARQUEE behavior=alternate width="100%"><IMG src="http://img.blog.163.com/photo/p1UGVgnYzS1EtF_72DKxrA==/5431059675632864852.jpg" border=0><IMG src="http://img.blog.163.com/photo/X9xkobSXkyqCS2n6qEUZEA==/5431059675632864851.jpg" border=0><IMG src="http://img.blog.163.com/photo/ucCxF9PDSffqUn0LWLVLlg==/1995939059855895314.jpg" border=0></MARQUEE>
<MARQUEE><FONT face=隶书 color=#ff0000 size=7>天上最美的是星星，人间最美的是真情，外表留给人的是印象，内心留给人的是感情，珍惜了今天你就拥有了明天，愿你开怀地笑，温柔地睡！</FONT></MARQUEE><SPAN g_c_hand? c06><FONT color=#fee1a3></FONT></SPAN></DIV></TD></TR></TBODY></TABLE>



         以上代码应用了图片和文字综合特效。



梦中人欢迎光临梦工场！感谢朋友的支持与关注！愿您浏览开心快乐！有所收获！分享请您留言！

博客素材和代码汇编         博客实用代码汇编      博客技巧、素材、和现成精品代码

代码效果在线运行检测       返回我的首页选择

评论这张

转发至微博

阅读(1475)| 评论(4)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_082071087086086069082081087095083084082064083084083071',
              blogTitle:'教你制作音画（2）',
              blogAbstract:'<P\>                   <A target=\"_blank\" href=\"http://df-wang2008.blog.163.com/\" \>伊杋叶</A\> 的 <A target=\"_blank\" href=\"http://df-wang2008.blog.163.com/blog/static/860506782008101001158726\" \>教你制作音画（2）</A\></P\>  <BLOCKQUOTE\>  <BLOCKQUOTE\>  <DIV align=\"center\" \>  <TABLE style=\"BORDER-BOTTOM: #ffff33 12px ridge; BORDER-LEFT: #ffff33 12px ridge; WIDTH: 700px; HEIGHT: 600px; BORDER-TOP: #ffff33 12px ridge; BORDER-RIGHT: #ffff33 12px ridge;\"  cellSpacing=\"0\" align=\"center\" \>  <TBODY\>  <TR\>  <TD\>  <CENTER\>  <TABLE border=\"0\" width=\"100%\"  \>  <TBODY\>  <TR\>  <TD height=\"562\" background=\"http://img.blog.163.com/photo/yEUc2hXSvHcnKBllgybJnw==/3392617894294440399.jpg\" \>  <P align=\"center\" \> </P\>  <TABLE\></TABLE\></TD\></TR\></TABLE\></CENTER\></TD\></TR\></TABLE\></DIV\></BLOCKQUOTE\></BLOCKQUOTE\>',
              blogTag:'',
              blogUrl:'blog/static/72337254200952863429816',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317308142655,
              publishTime:1246185269816,
              permalink:'blog/static/72337254200952863429816',
              commentCount:4,
              mainCommentCount:1,
              recommendCount:0,
              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:true,
              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/72337254200952863429816">${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 - 订阅此博客

梦中人の梦工场

导航

日志

教你制作音画（2）

历史上的今天

最近读者

热度

评论

页脚