DIV+CSS教程_（Table+Div+Css）真正的一劳永逸，图片边框嵌套样式魔鬼教程

DIV+CSS教程_（Table+Div+Css）真正的一劳永逸，图片边框嵌套样式魔鬼教程

这几天对一个小软件（photoworks v1.5）感情很深。就是随便给一张图片，可以用它自动生成看起来很专业的边框样式。如果再结合Photoshop，就可以打造出令人赏心悦目的效果。后来我转换了一下思路，我们能不能把这样的功能用网页语言表现出来呢？尤其是对于喜欢上网写BLOG的朋友们，并不是每个上网的地方都安装了图像处理软件，而且很多朋友喜欢把自己的图片打扮漂亮，却并不怎么会用图像处理软件。我想如果把它改编成网页语言，只要把几段固定的代码写在一个小TXT文档里，贴图片的时候，随时随地地复制出来调用就一切OK，这样是不是很COOL？！

好了不多废话。现在我们开始操作。说一下思路：首先分析照片边框的结构，如下图所示，它其实是由8个小块组成的。索性把他们按位置编个号。即：
<1>top_left.jpg        <2>top.jpg         <3>top_right.jpg
<4> left.jpg              main picture        <5>right.jpg
<6>bottom_left.jpg   <8>bottom.jpg   <9>bottom_right.jpg

这个结构对我们有什么启示呢？用过Imageready朋友应该想到什么了，其实我们可以大胆用<Table>标签，把这些小块图片作个无缝拼接，而对于<2>top.jpg、<4> left.jpg、<5>right.jpg、<8>bottom.jpg，只需要把它们定义为单元格背景，用<Style>标签指定重复方式和排列位置即可！


OK，思路很简单！现在开始做背景图片了，用Photoshop就可以胜任，要做8张哦，如果嫌麻烦你就尽量用“编辑”-“变换”命令，把握好旋转角度，一张就变成了四张。愿意自己DIY背景的就自己做吧，建议把图片保存为*.jpg网页格式。觉得自己动手Faint的就用我做好的吧。呵呵（^^）！下面摆四个样式出来：

Style 1：仿拍立得相框布局设计
<!--仿拍立得相框布局设计代码开始-->
<div align="center"><table id="Table_01" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="13" height="13" background="http://album.sina.com.cn/pic/498ebf94020008nz"></td>
  <td background="http://album.sina.com.cn/pic/498ebf94020008o0" height="13"></td>
  <td width="13" height="13" background="http://album.sina.com.cn/pic/498ebf94020008o1"></td>
 </tr>
 <tr>
  <td width="13" background="http://album.sina.com.cn/pic/498ebf94020008o2"></td>
  <td>
   <table style="border-width:2px; border-color:#FFFFFF; border-style:solid">
   <tr><td><img src="http://album.sina.com.cn/pic/498ebf94020008og" GALLERYIMG="false"></td></tr>
   </table>
  </td>
  <td width="13" background="http://album.sina.com.cn/pic/498ebf94020008o3"></td>
 </tr>
 <tr>
  <td width="13" background="http://album.sina.com.cn/pic/498ebf94020008o2"></td>
  <td bgcolor="#999999"><div align="right" style="color:#999999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFFFFF;border-width:2px; border-color:#FFFFFF; border-style:solid">Shopping Cat Blog 2006</div></td>
  <td width="13" background="http://album.sina.com.cn/pic/498ebf94020008o3"></td>
 </tr>
 <tr>
  <td width="13" height="13" background="http://album.sina.com.cn/pic/498ebf94020008o4"></td>
  <td height="13" background="http://album.sina.com.cn/pic/498ebf94020008o5"></td>
  <td width="13" height="13" background="http://album.sina.com.cn/pic/498ebf94020008o6"></td>
 </tr>
</table></div>
<!--仿拍立得相框布局设计代码结束 -->

Style 2：简单相框布局设计
<!--简单相框布局设计代码开始-->
<div align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td>
<table cellpadding="0" cellspacing="0" style="border-width:1px; border-color:#999999; border-style:solid">
   <tr><td><img src="http://album.sina.com.cn/pic/498ebf94020008oi" style="border-width:2px; border-color:#ffffff; border-style:solid" GALLERYIMG="false"></td></tr>
</table>
</td></tr>
<tr><td style="background-attachment:fixed; background-position:left; background-repeat:no-repeat; background-image:url(http://album.sina.com.cn/pic/498ebf94020008o7)" width="19">&nbsp</td>
</tr>
</table></div>
<!--简单相框布局设计代码结束 -->

Style 3：仿拍立得相框布局设计《邮票卡角》
<!--仿拍立得相框布局设计《邮票卡角》代码开始-->
<div align="center"><table id="Table_01" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
 <tr>
  <td width="20" height="20" style="background-position:bottom" background="http://album.sina.com.cn/pic/498ebf94020008oe"></td>
  <td background="http://album.sina.com.cn/pic/498ebf94020008od" height="20"></td>
  <td width="20" height="20" background="http://album.sina.com.cn/pic/498ebf94020008of"></td>
 </tr>
 <tr>
  <td width="20" background="http://album.sina.com.cn/pic/498ebf94020008ob"></td>
  <td>
   <table style="border-width:5px; border-color:#000000; border-style:solid" cellpadding="0" cellspacing="0">
   <tr><td><img src="http://album.sina.com.cn/pic/498ebf94020008oj" GALLERYIMG="false"></td></tr>
   </table>
  </td>
  <td width="20" background="http://album.sina.com.cn/pic/498ebf94020008oc"></td>
 </tr>
 <tr>
  <td width="20" background="http://album.sina.com.cn/pic/498ebf94020008ob"></td>
  <td><div align="center" style="color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold">Shopping Cat Blog 2006</div></td>
  <td width="20" background="http://album.sina.com.cn/pic/498ebf94020008oc"></td>
 </tr>
 <tr>
  <td width="20" height="20" style="background-position:right" background="http://album.sina.com.cn/pic/498ebf94020008o9"></td>
  <td height="20" background="http://album.sina.com.cn/pic/498ebf94020008o8"></td>
  <td width="20" height="20" background="http://album.sina.com.cn/pic/498ebf94020008oa"></td>
 </tr>
</table></div>
<!--仿拍立得相框布局设计《邮票卡角》代码结束 -->