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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML如何给自己的图片加上精美边框图片(续篇一)  

2011-03-26 10:20:08|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

如何给自己的图片加上精美边框图片

 

博文简介

 

 

 

在上篇的介绍感觉还有些不足之处,并且在图片边框上进行特效的移动也是一番情趣,故而在这里做做拓展,再续前缘,丰富画面,让我们的网页更加绚丽多彩。

 

图片加透明动态图片边框(续)

图片移动加动态透明或不透明图片边框

水波纹动感图片加动态透明或不透明图片边框

 

 

相关图片移动代码链接:

多图重叠移动代码及效果图

多张图片串联式放映代码

图片移动效果的欣赏与制作(一)

图片移动、及其图片链接网址移动代码(二)

图片梦幻显现隐藏移动的特效制作(一)

图片梦幻显现隐藏的特效制作(二)

在线制作水波纹动感图片

 

 

四、图片加透明动态图片边框(续)
HTML代码:

 

HTML基本代码:
<DIV><IMG style="LEFT:40px;WIDTH:图片宽度px;POSITION:relative;TOP:80px;HEIGHT:图片高度px;ridge:"src="图片地址"></DIV>
<DIV><IMG style="LEFT:40px;WIDTH:相框宽度px;POSITION:relative;TOP:-500px;HEIGHT:相框高度px;ridge:"src="相框地址"></DIV>

 

HTML实例一代码:
<DIV><IMG style="LEFT:100px;WIDTH:180px;POSITION:relative;TOP:80px;HEIGHT:180px;ridge:"height=180

src="http://img617.ph.126.net/oc9b7rCMDG4pv4JphMoCjQ==/1910370666937359816.jpg"width=180></DIV>
<DIV><IMG style="LEFT:40px;WIDTH:300px;POSITION:relative;TOP:-160px;HEIGHT:300px;ridge:"

src="http://img844.ph.126.net/vgogUl8b9SdyFIK_9a3x5Q==/896779275800407029.gif"></DIV>

 

HTML实例二代码:
<DIV><IMG style="LEFT:40px;WIDTH:450px;POSITION:relative;TOP:80px;HEIGHT:515px;ridge:" 

src="http://img233.ph.126.net/EOSLwN0DeRbHIWh9l4Mf8g==/1754152054862869948.jpg"></DIV>
<DIV><IMG style="LEFT:40px;WIDTH:504px;POSITION:relative;TOP:-500px;HEIGHT:584px;ridge:"

src="http://img458.ph.126.net/JmmyBt8J2tZj7R_ahsKzwg==/25614222881016798.gif"></DIV>

 

HTML代码示例: 

 

HTML实例一

 

如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客
如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客

 

 

HTML实例二
 
 
如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客
如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客
 
HTML代码详解:

 

  • 在上篇中的这个代码是在<TABLE>...</TABLE>表格标签内,因为背景图片是平铺的图片控制宽度和高度难,所以在这里我运用<DIV>...</DIV>标签表达,控制图片的宽度和高度简单易操作。
  • <DIV>简介:(不重要,简单了解)
    <DIV> 可定义文档中的分区或节(division/section)。
    <DIV>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
    <DIV>用法
    <DIV>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是<DIV>固有的唯一格式表现。可以通过<DIV>的class或id应用额外的样式。不必为每一个<DIV>都加上类或id,虽然这样做也有一定的好处。
  • 两组<DIV>不可互换前后顺序,调节上下两组代码的水平距离LEFT、垂直距离TOP的值,使其位置显示恰当正确。

 

五、图片移动加动态透明或不透明图片边框
HTML代码:

 

HTML基本代码:
<CENTER>
<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=left width=移动宽度>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址1" width=图片宽度>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址2" width=图片宽度>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址3" width=图片宽度>
</MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML实例一代码:
<CENTER>
<TABLE width=500 background="http://img837.ph.126.net/6y2kHItfa34DaCXnvFnOgQ==/767019311537638499.gif" height=600 border=0>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=left width=460>
<IMG height=580 style="FILTER: Alpha(opacity=100,style=2); WIDTH: 391px; HEIGHT: 580px" src="http://img535.ph.126.net/yNpV9oMe1dCyWEw0cgXnew==/2615465483596377897.jpg" width=391>
<IMG height=580 style="FILTER: Alpha(opacity=100,style=2); WIDTH: 391px; HEIGHT: 580px" src="http://img120.ph.126.net/mEfJg64f2LfR4O0udcweCg==/1998190859670217449.jpg" width=391>
<IMG height=580 style="FILTER: Alpha(opacity=100,style=2); WIDTH: 391px; HEIGHT: 580px" src="http://img381.ph.126.net/tek14vAC4fqTEywA6Ue7pA==/2391974352088164893.jpg" width=391>
</MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML实例二代码:

<CENTER>
<TABLE width=500 background="http://img837.ph.126.net/6y2kHItfa34DaCXnvFnOgQ==/767019311537638499.gif" height=600 border=0>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=3 behavior=alternate width=460><IMG  style="FILTER: Alpha(opacity='95',style='2')" width=430 src="http://img245.ph.126.net/djou4gKQRNridXhB3WWiAA==/2113595600121729940.jpg" height=500></MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

HTML代码示例: 

 
HTML实例一
 
 
如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客 如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客 如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客

 

HTML实例二

如何给自己的图片加上精美边框图片(续篇一) - qy-0824 - 启野的博客
HTML代码详解:

 

向左移动代码
<MARQUEE scrollAmount=2 direction=left width=460>...</MARQUEE>
多张图片的高度相同并小于背景图片的高度、移动代码的宽度小于背景的宽度,以便适宜图片边框的宽度。

六、水波纹动感图片加动态透明或不透明图片边框
HTML代码:

 

HTML基本代码:

<CENTER>
<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<P style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤

镜高度px" align=center>
水波纹动感图片代码
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML实例代码:

 

<CENTER>
<TABLE height=600 width=500 background=http://img845.ph.126.net/RjUyVJpowPo14p3SK0O3dQ==/907193849938563441.gif border=0>
<TBODY>
<TR>
<TD>
<P style="FILTER: Alpha(opacity=100,style=2); WIDTH: 342px; HEIGHT: 508px"  align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=middle src=http://www.crazyprofile.com/water_effect/water.swf width=342 height=508 type=application/x-shockwave-flash allowScriptAccess="sameDomain" wmode="transparent" quality="high" FlashVars="pic=2369.jpg&amp;fldr=Mar2011&amp;ww=342&amp;hh=508"></EMBED></P>
</TD></TR></TBODY></TABLE></CENTER>

 

HTML代码示例: 

 

 

 

HTML代码详解:

 

滤镜写在<p>标签内:

<P style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" align=center>...</p>

水波纹动感图片代码:

写在<p>标签内,调整滤镜的宽度和高度与水波纹的宽度和高度相同。

相关水波纹制作代码点击:

在线制作水波纹动感图片

欢迎光临启野博客!
  评论这张
 
阅读(1103)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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