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

王雪博客

博客是精神家园,述说着不变诺言,博友是一生眷恋!期待开心的一天 !

 
 
 

日志

 
 

【转载】在背景图上制作图文并排排列的代码  

2012-06-15 13:22:06|  分类: 图片羽化代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在背景图上制作图文并排排列的代码

Good fun编辑

效果1:

 

 

在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun      有了炽热的好奇之

心,代码学习吸引着我

们为之通宵达旦、废

寝忘食。有了好奇心,

就有了敏感的眼睛,就

能够从平淡中制作出

神奇。

        

 效果2:

在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun       有了炽热的好奇之

    心,代码学习吸引着我

    们为之通宵达旦、废

    寝忘食。有了好奇心,

    就有了敏感的眼睛,就

    能够从平淡中制作出

    神奇。            

 

素材图片: 

在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun

 在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun

 

 

在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun

 

在背景图上制作图文并排排列的代码 - Good fun - Good fun网易博客 Goodfun

 

代码1:

 <DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#000000 border=0>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: progid:DximageTransform.Microsoft. shadow(color:#DC143C,direction:120,strength:30)" borderColor=#ffff00 cellSpacing=35 cellPadding=0 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=375 cellSpacing=0 cellPadding=0 width=600 align=center background=http://img.bimg.126.net/photo/nAfJ4pRlAdSLxTY7Cw7A2Q==/4525836150531106992.jpg border=0>
<TBODY>
<TR>
<TD>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P
><IMG height=283 hspace=60 src="http://img.bimg.126.net/photo/TXktENq8z9vZro7x03VMkA==/1757248279605885127.jpg" width=200 align=left border=0> <FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书" color=#ffff00><STRONG>&nbsp;&nbsp;&nbsp;&nbsp; <FONT style="FONT-SIZE: 22px" color=#ffff00>有了炽热的好奇之</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ffff00>心,代码学习吸引着我</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ffff00>们为之通宵达旦、废</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ffff00>寝忘食。有了好奇心,</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ffff00>就有了敏感的眼睛,就</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ffff00>能够从平淡中制作出</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书" color=#ffff00><STRONG><FONT style="FONT-SIZE: 22px"><FONT color=#ffff00>神奇。</FONT> </P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书" color=#ffff00><STRONG><FONT style="FONT-SIZE: 22px"><FONT color=#ffff00>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT></STRONG></FONT></P></FONT></STRONG></FONT></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

 代码2:

 <DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#000000 border=0>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: progid:DximageTransform.Microsoft. shadow(color:#ADFF2F ,direction:120,strength:30)" borderColor=#ee0000 cellSpacing=35 cellPadding=0 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=375 cellSpacing=0 cellPadding=0 width=600 align=center background=http://img.bimg.126.net/photo/QnYFT2R7-fRTRTlJ82thLw==/2816720091944409251.jpg border=0>
<TBODY>
<TR>
<TD>
<P><IMG height=280 hspace=60 src="
http://img50.bimg.126.net/photo/vs7vDkex-cguX6lZoYLIoQ==/4233102174752684483.jpg" width=200 align=right border=0> <FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书" color=#ffff00><STRONG>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<FONT style="FONT-SIZE: 22px" color=#ff0000>有了炽热的好奇之</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ff0000>&nbsp;&nbsp;&nbsp; 心,代码学习吸引着我</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ff0000>&nbsp;&nbsp;&nbsp; 们为之通宵达旦、废</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ff0000>&nbsp;&nbsp;&nbsp; 寝忘食。有了好奇心,</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ff0000>&nbsp;&nbsp;&nbsp; 就有了敏感的眼睛,就</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书"><STRONG><FONT style="FONT-SIZE: 22px" color=#ff0000>&nbsp;&nbsp;&nbsp; 能够从平淡中制作出</FONT></STRONG></FONT></P>
<P><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 隶书" color=#ffff00><STRONG><FONT style="FONT-SIZE: 22px"><FONT color=#ff0000>&nbsp;&nbsp;&nbsp; 神奇。</FONT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT></STRONG></FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

 

Good fun提示: 

1、代码中红色的是背景图片地址,绿色的是上面的图片地址。

2、文字内容可以自己更改,“FONT-SIZE: 20px”是文字大小,“color=#ffff00”是文字的颜色,“FONT-FAMILY: 隶书”是文字字体,这些都可以自己设置。

3、黄色的是表格的高度和宽度,蓝色的是上面图片的高度和宽度,可以更改数值改变大小!

4、上面紫色的是,阴影表格的属性定义,初学者不用更改了,你想学,请点击进入参考偶的日志《带外边框投影的留言栏代码 》及《HTML语法手册(代码大全) 》。

 

本文乃Good fun编辑,喜欢请点击右下角的“引用”,引用后不得删除出处链接。

 

  评论这张
 
阅读(15)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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