注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

代码合成图  

2008-08-16 04:37:40|  分类: 综合编辑 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML代码合成图

 

代码合成图( 01  02  03  04 )

 

代码合成图01

 

移动的多张图片+连接

 

代码:   <div align ="center"><marquee behavior="alternate"direction="right"width="90%"height="100"scrollamount="2"scrolldelay="30"><a target="cont"href="链接网址"><img src="图片网址"width="宽度"height="高度"border="0"></a></marquee></div>

 要想多加几张图片+连接,在最后那个</marquee>的前面加上<a target="cont"href="链接网址"><img src="图片网址"width="100"height="100"border="0"></a>

解读: <div></div>区隔标签      <marquee></marquee>移动标签      <a></a>链接标签

align ="对齐方式"      left 左      center 中      right 右

behavior="移动方式": scroll一圈一圈绕着走     slide 只走一次       alternate  来回走

direction="移动方向":  up    down    left    right      上  下  左  右

width="宽度"      height="高度"       scrollamount="移动速度"        scrolldelay="移动时间"

target="打开方式"     cont打开特定视窗名称       <img>图片标签       border="边框宽度"

实例代码 <DIV align=center>
<MARQUEE direction=right height=100 behavior=alternate width=500 scrollAmount=2 scrollDelay=30><A href="
http://blog.sina.com.cn/weinihuozhe" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/fd02e54639ef98fa481a1b65e9c55638.jpg" width=100 height=100></A>
<A href="
http://blog.sina.com.cn/amyjulys" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/e2e6bc811552742482ceed1d034f9cfb.jpg" width=100 height=100></A><A href="http://blog.sina.com.cn/luckyying1205" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客"src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/e90a0cd7b72ea6cf6f3aefc5fecb32bc.jpg" width=100 height=100></A>
<A href="
http://blog.sina.com.cn/gezi521btre" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/db6e8a58a13fb5ed8396af9f4366416a.jpg" width=100 height=100></A><A href="http://sod1984.v.56.com/" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/bb30da39a9791d7d8c56eaac67bedd2b.jpg" width=100 height=100></A><A href="http://yonghong1168.v.56.com/" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/9e43615832d12510646bff1df45155da.jpg" width=100 height=100></A><A href="http://pq932641551.v.56.com/" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/d52992037073232d3618ea381e90e77b.jpg" width=100 height=100></A><A href="http://moment111.v.56.com/" target=cont><IMG title="HTML代码合成01 - 火力光波 - 火力光波的博客" border=0 alt="HTML代码合成01 - 火力光波 - 火力光波的博客" src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/c951b78b1731ade88b6d8ab71cd0e792.jpg
" width=100 height=100></A></MARQUEE></DIV>

   
表格背景图平铺+移动文字
 

代码: <table background="背景图片地址" height="多倍原图片的高度"width="多倍原图片的宽度"><tr><td>移动文字</td></tr></table>

移动文字的代码是:

<marquee behavior="移动方式"width="移动宽度"><font align="对齐"size="字号"face="字体"color="颜色">文字</font></marquee>

 例代码: <table background="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/ee0e0583824c1426e59981b796de6b89.gif" width="465" height="141" align=center>
<tr>
<td>
<marquee behavior="alternate"width="100%"><br><br><br><br><font align="bottom"size="5"face="黑体"color="ffooff"><b>祝愿朋友健康、美丽、幸福! </b></font></marquee>
</td>
</tr>
</table>

 

移动的表格背景平铺图+移动文字

 例代码 <marquee width="450" scrollamount="1"><table background="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/3e908406a77a8f2aaf1fc507d63baf86.gif" height="210"width="1500" align=center><tr><td></td></tr></table></marquee>
 <marquee behavior="alternate"width="450"><font align="center"size="5"face="黑体"color="ooffff"><b>火力光波欢迎您光临!</b></font></marquee>

       

表格套表格+背景图+图文移动

代码: <CENTER><table cellSpacing="0" cellPadding="0"background="http://img.blog.163.com/photo/iXql4lgQUQchuJnR8CsV7Q==/2837830715197308038.jpg" width="480" height="320" border="0"><TBODY><tr>
<td><marquee scrollamount="2"width="480"><table background="
http://img.blog.163.com/photo/ye6qOnB2Sjektc4-A9i-fQ==/5102859852787912175.jpg
" height="280"width="200"><tr><td></td></tr></table></marquee><marquee behavior="alternate"width="480"><font align="center"size="5"face="黑体"color="ffooff"><b>祝愿灰姑娘健康、美丽、幸福!</b></font></marquee></td></tr></TBODY></table></CENTER>

效果:

祝愿灰姑娘健康、美丽、幸福!

 

表格背景图+中间向两边移动 

思路:在表格背景图片的基础上,用两张同样图片,分别做向左、向右移动。

 例代码 <P align=center><table background="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/155a005f57b01e5ca4f82aebb0cf857f.gif" width="480" height="330"><tr><td><nobr><MARQUEE width=230 height=330><IMG src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/c74cfebd4eef7c1c2b191d9efe3900ad.jpg" border=0></MARQUEE>&nbsp;<MARQUEE direction=right width=230 height=330><IMG src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/1fa088423adaa45d9401b2c8e3fcfe67.jpg" border=0></MARQUEE></nobr></td></tr></table></P>

注意:每张图片移动的宽度,必须小于画面的宽度。  

 
表格背景图+两边向中间移动
 例代码 <P align ="center"><table background="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/155a005f57b01e5ca4f82aebb0cf857f.gif" width="480" height="330"><tr><td><nobr><MARQUEE direction=right width=230 height=330><IMG src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/c74cfebd4eef7c1c2b191d9efe3900ad.jpg" border=0></MARQUEE>&nbsp;<MARQUEE width=230 height=330><IMG src="http://img.snpstudios.com.cn/upload/multIMG/2011_06_IMGS/1fa088423adaa45d9401b2c8e3fcfe67.jpg" border=0></MARQUEE></nobr></td></tr></table></P>
注意:每张图片移动的宽度,必须小于画面的宽度。

 
表格四列中的图+对开移动
 
代码: <center><TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0><TBODY><TR><TD align=middle><MARQUEE scrollAmount=3 scrollDelay=100 direction=right width=150><IMG src="

http://img.blog.163.com/photo/z8Q-lP_CJYGgimr2m61-rQ==/3674374345981567305.jpg"></MARQUEE></TD><TD align=middle><MARQUEE scrollAmount=3 scrollDelay=100 width=150><IMG src="

http://img.blog.163.com/photo/z8Q-lP_CJYGgimr2m61-rQ==/3674374345981567305.jpg"></MARQUEE></TD><TD align=middle><MARQUEE scrollAmount=3scrollDelay=100 direction=right width=150><IMG src="

http://img.blog.163.com/photo/z8Q-lP_CJYGgimr2m61-rQ==/3674374345981567305.jpg"></MARQUEE></TD><TD align=middle><MARQUEE scrollAmount=3scrollDelay=100 width=150><IMG src="

http://img.blog.163.com/photo/z8Q-lP_CJYGgimr2m61-rQ==/3674374345981567305.jpg"></MARQUEE></TD></TR></TBODY></TABLE></center>

 

效果:

HTML代码合成01 - 火力光波 - 火力光波的博客 HTML代码合成01 - 火力光波 - 火力光波的博客 HTML代码合成01 - 火力光波 - 火力光波的博客 HTML代码合成01 - 火力光波 - 火力光波的博客
 
  
 

HTML代码合成01 - 火力光波 - 火力光波的博客

 

 

 如看效果请将实例中代码粘贴到“代码运行框

 

精美分割线 - 火力光波 - 火力光波的博客

 

代码合成图( 01  02   03   04 )

  评论这张
 
阅读(788)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017