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

.

.

 
 
 

日志

 
 
关于我

相识是缘!用友情的丝线,纺织心与心的距离,把一声声祝福,托于清风明月,轻轻的给你捎去!

网易考拉推荐

(教程)文字与图片的几种排版用法  

2008-09-18 06:25:31|  分类: 装扮博客 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

一、图左文右近型:

代码:

<P><IMG height=201 src="图片地址" width=154 align=left border=0><FONT face=Arial> 日志文字<BR>&nbsp;</FONT><BR clear=left></P>

图例:

 (教程)文字与图片的几种排版用法 - 林子 - . 日志文字在左边的示例
 

 

二、图左文右远有距离型:

代码:如果你觉得文字与图片太接近了.可加入 [vspace=0 hspace=30]  加入后的代码: <img border="0"  src="图片地址"  align=left vspace=0 hspace=30 width="154" height="201">  你可以调整这两个值,通过试验看一看会有什么样的变化...

改后的代码是:
<P><IMG height=201 hspace=30 src="图片地址" width=154 align=left border=0><FONT face=Arial>日志文字</FONT></P>

图例:

 (教程)文字与图片的几种排版用法 - 林子 - .日志文字图左文右远有距离型

 

 

 

 

 

 

三、图右文左:

代码:

<P><IMG height=201 src="图片地址" width=154 align=right  border=0><FONT face=Arial> 日志文字<BR>&nbsp;</FONT><BR clear=left></P> 

图例:

 (教程)文字与图片的几种排版用法 - 林子 - . 日志文字图右文左
 

 

 

 

 

 

四、文字在图右下角

代码:<P><IMG height=201 src="图片地址" width=154 align=up  border=0><FONT face=Arial> 日志文字<BR>&nbsp;</FONT><BR clear=left></P>

图例:

 (教程)文字与图片的几种排版用法 - 林子 - . 日志文字在图右下角

 

五、文字在图片之间:

代码:<P><IMG height=201 src="图片地址" width=154 align=CENTER  border=0><FONT face=Arial> 日志文字<BR>&nbsp;</FONT><BR clear=left></P>

图例:

 (教程)文字与图片的几种排版用法 - 林子 - . 日志文字在图片之间

 

六、文字在图片中间:

<TABLE height=300 cellSpacing=1 width=280 background=图片地址>
<TBODY>
<TR>
<TD width=220 height=210>
<P align=center>文字</P></MARQUEE></TD></TR></TBODY></TABLE>

图例:

字在图片中间

 

七、让图片飘起来(红色区自己可换图)

代码:<DIV align=center>
<MARQUEE scrollAmount=10 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=450 height=350><IMG src="
http://img.blog.163.com/photo/zF1W-BK0hLjoOy5Y34ezQQ==/5145362574271285321.jpg
"></MARQUEE></MARQUEE

图例:

 (教程)文字与图片的几种排版用法 - 林子 - .

 

八、图片走走停停

<MARQUEE scrollAmount=3 behavior=alternate width=100%><MARQUEE scrollAmount=3 width=96%>
<IMG src="
http://img.blog.163.com/photo/ubj4CdHASK1V4fm6DF7Gkg==/877357502407456120.jpg"><IMG src="http://img.blog.163.com/photo/ubj4CdHASK1V4fm6DF7Gkg==/877357502407456120.jpg"><IMG src="http://img.blog.163.com/photo/ubj4CdHASK1V4fm6DF7Gkg==/877357502407456120.jpg">
</MARQUEE></MARQUEE>

图例:  (教程)文字与图片的几种排版用法 - 林子 - . (教程)文字与图片的几种排版用法 - 林子 - . (教程)文字与图片的几种排版用法 - 林子 - .

九、浮雕效果

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

图例:

 (教程)文字与图片的几种排版用法 - 林子 - .

 

十、水中倒影效果

<center><IMG src="图片地址" width="200" height="150"><BR>
<IMG src="图片地址" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" width="200" height="150"></center>

图例:

 (教程)文字与图片的几种排版用法 - 林子 - .
 (教程)文字与图片的几种排版用法 - 林子 - .
  评论这张
 
阅读(241)| 评论(12)
推荐 转载

历史上的今天

评论

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

页脚

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