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

寒情博客

http://8-com.blog.163.com

 
 
 

日志

 
 

图片加框DIY  

2010-01-05 14:20:24|  分类: 〓博客教程〓 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、给图片加颜色框:


图片加框DIY - 寒情 - 8-com.blog.163.com
代 码 如 下:<TABLE borderColor=#90fc00 width=150
cellSpacing=2 cellPadding=1 border=6>
<TBODY>
<TR>
<TD>
<IMG height=200 src="图片地址" width=150>
</TD></TR></TBODY></TABLE>

说明:borderColor=#90fc00为边框颜色,具体颜色可参照——《 HTML颜色代码表
border=6为边框厚度,width=150为边框宽度,根据图片宽度设定,边框高度一般不用写入,由图片自行撑展,height=200 width=150为图片高度与宽度,可以减少或增加数据来调整图片的大小。更详尽的边框制作请看——《 十分钟学会做边框


粒状边框代码:<div style="text-align: center"><img style="filter: progid:DXImageTransform.Microsoft.Glow(color=#009966,strength=20" alt="" src="图片地址"></div>


color=#009966为边框颜色strength=20为边框厚度

图片加框DIY - 寒情 - 8-com.blog.163.com
立体边框效果代码:<TABLE style="FILTER: progid:dximagetransform.microsoft.shadow(color:#00DD00 ection:145,strength:15)" cellSpacing=10 cellPadding=15 width=150 border=5>
<TBODY>
<TR>
<TD vAlign=center align=middle><IMG src="图片地址"></TD></TR></TBODY></TABLE>


框体颜色与厚度大家可自行调整

二、给图片加素材框:

图片加框DIY - 寒情 - 8-com.blog.163.com

加入素材框代码1:<TABLE cellSpacing=0 cellPadding=0 width=边框宽度 align=center background=框内的图片地址 border=0>
<TBODY>
<TR>
<TD background=边框图片地址 height=边框高度></TD></TR></TBODY></TABLE>

说明:图片与边框只能选择规格大小相近的,height=边框高度记得写上,图片才能完整显示。更多的相框素材请看——《 相框素材库


图片加框DIY - 寒情 - 8-com.blog.163.com
加入素材框代码2:<TABLE cellSpacing=8 cellPadding=0 width=边框宽度 align=center background=边框图片地址 border=0>
<TBODY>
<TR>
<TD><IMG height=184 src="图片地址" width=124></TD></TR></TBODY></TABLE>

说明:这款代码优点就是大图片通过调整也能加入小边框,但如果边框为不规则,框内图片很难调整,如效果图把边框四个角的红心遮住了,cellSpacing=8为边框厚度,相应的框内图片大小根据比例调整。


(原创)图片加框DIY - Q仔 - Q仔*网易博客
加入素材框代码3:<TABLE cellSpacing=8 cellPadding=0 width=边框宽度 align=center background=边框图片地址 border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址" ></TD></TR></TBODY></TABLE>

说明:这款代码与上款是一样的,不过这款的边框背景图片选择不一样,这款选取闪底图片作为框体,而且框内图片大小没有限制。
闪底素材请看——《 背景图片素材汇总

实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 滚动条框制作方法与代码 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 日志图文排列样式与代码
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 一分钟学会查找音乐地址 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 清明上河图版本大全
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 如何给日志做封面 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 彩色闪字教你做
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 博客等级积分帮助与说明 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 让各大网站搜到你
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 文字特效代码大全 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 图片特效代码大全
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 移动文字全都汇 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 图框链接教你做
实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 幻灯片制作方法与代码 实用表格样式与代码汇总  - 寒情 - 8-com.blog.163.com 实用表格样式代码汇总
博客技巧 电脑学堂 素材基地 清明上河图版本大全 - 寒情 - 8-com 的博客 软件学院 音画视听 精彩图酷
博客代码 书画艺术 游戏大厅 精美边框 顶栏模版 时钟超市
flash素材 影音素材 查看关于本站的更多信息搏客顶栏动态图片(一) - Q仔 - Q仔*网易博客 经典摘录 收藏本站
如果你喜欢此日志,请点击日志左下方的“推荐”,
让大家分享,也算是对寒情的支持,谢谢!
  评论这张
 
阅读(5549)| 评论(13)
推荐 转载

历史上的今天

评论

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

页脚

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