论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css | 发表日期:2010-5-6 10:43:35

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>
<!--仿拍立得相框布局设计《邮票卡角》代码结束 -->

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058