教你使用边框的绝招和制作方法

个人日记



第一层图片地址
http://b98.photo.store.qq.com/psb?/V13FkzEm3Sqo7w/R3K1IESx5ACRPZiLbRRaxw8BfUVh9W0ftSZStp9YDKQ!/b/YSXFbzrIDAAAYnJndzrxDAAA&bo=LACiAQAAAAABAKg!&rf=photoDetail
第二层图片地址
http://b95.photo.store.qq.com/psb?/V13FkzEm3Sqo7w/2Q9nuL.S*Q8Yln.xlg45aJZzxj6KhB7gEmcMF3fv.yg!/b/YSCvsDj2IgAAYniPqjg.IwAA&bo=DQBkAAAAAAABAE4!&rf=photoDetail
背景图片地址
http://b274.photo.store.qq.com/psb?/V13FkzEm2vVSNo/MzsDZLXD2d5icl2iF1JxK72dvMYLM8z*FkTvT1nbamI!/b/dB9WWqMwKQAA&bo=4wFrAQAAAAABAK8!&rf=photoDetail 

长江原创音画245446823
 代码如下

最近我发现很多图片边框代码框与框之间的距离都是用分行代码来拉开距离的 
这种边框制作方法容易在使用过程中产生多余的分行代码
从而导致边框失形不是上边的边宽了就是下边宽了很难掌握  
  我用的这个边框代码每层都有控制高和宽的代码 不会在使用过程中变形

比如第一层的宽是WIDTH:870px  到第二层宽调整为WIDTH:802px 
 第二层少出来的68就是第一层左右显示出来的边的宽度  左右个分到34的宽  
到第三层的宽比第二层的宽少多宽度那就是第二层能显示出来的边的宽    
至于边距的高也是同样的道理以此类推  你先看下这三层的高和宽都是不一样的
也就是因为每层的高和宽不同所以才有显示出来的边的效果
你可以根据自己的想象来设计自己喜欢的边框效果
 也许有人会觉得每层都控制使用起来麻烦   其实只要你多用几次熟悉掌握后
一点也不麻烦   现在腾讯很不可爱  还是用绝对控制宽和高的方法稳定些

 <table style="BACKGROUND-IMAGE:url(第一层图片地址);WIDTH:870px;HEIGHT:2100px" title="长江QQ245446823" border="0" cellSpacing="5" borderColor="#cccccc" cellPadding="5" width="100%" bgColor="#ffffff" align="center">
<TBODY><TR><TD>
<table style="BACKGROUND-IMAGE:url(第二层图片地址);WIDTH:802px;HEIGHT:2050px" title="长江QQ245446823" border="0" cellSpacing="5" borderColor="#cccccc" cellPadding="5" width="100%" bgColor="#ffffff" align="center">
<TBODY><TR><TD>
<table style="BACKGROUND-IMAGE:url(背景色图片地址);WIDTH:790px;HEIGHT:2037px" title="长江QQ245446823" border="0" cellSpacing="5" borderColor="#cccccc" cellPadding="5" width="100%" bgColor="#ffffff" align="center">
<TBODY><TR><TD>

上边是三层边框的上半部分代码 制作好边框后 把需要羽化的图片和文字都加好后  最后放上边框的结束标签
代码都是成双的 有开始就有结束 少了结束标签 那边框就会套到留言的部分去了 当然 你也可以制作成五层六层的边框
不过边框有几层结束标签就得有几个才可以


结束标签如下

 </TD></TR></TBODY>
</table>
</TD></TR></TBODY>
</table>
</TD></TR></TBODY>
</table>
带底边的结束签

</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>
<P>&nbsp; </p>
</TD></TR></TBODY>
</table>

 

文章评论