简明现代魔法 -> HTML超文本标记语言 -> 使用表格处理切片图片的无缝衔接

使用表格处理切片图片的无缝衔接

2009-08-10

      使用photoshop的切片工具可以将一幅图片切割成若干个切片图片,这些图片可以在网页设计中重新组成原来的图片。这里介绍如何使用表格来无缝衔接这些切片图片。

      <p align=center>
      <table cellSpacing=0 cellpadding=0 border=0>
      <tr>
      <td><img src="images/1.jpg" height=256 width=724></td>
      <tr>
      <td><img src="images/2.jpg" height=256 width=724></td>
      <tr>
      <td><img src="images/3.jpg" height=256 width=724></td>
      <tr>
      <td><img src="images/4.jpg" height=256 width=724></td>
      </table>
      </p> 
      

代码注释

1. <p align=center></p>
放在表格前面,align=center表示表格居中显示(按实际要求可要可不要)
2. <table cellSpacing=0 cellpadding=0 border=0></table>
设定表格,cellSpacing表示表格间隔,0表示无间隔;cellpadding表示表格填充,0表示不填充;border表示表格边框,0表示无边框。
3. <img src="http://1843.img.pp.sohu.com.cn/images/2009/5/1/2/26/121a3c91c5bg214.jpg" height=256 width=724>
链接图片,height表示表格高度,width表示表格宽度,高度与宽度在<>内可随意不同放置;链接图片的格式为:<img src="图片地址">
4. <tr>
定义表行,表有多少行就有多少个<tr>
6. <th></th>
定义表头,用于说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>。单一列可不用使用此代码,二列以上必须用。
7. <td></td>
定义表元,用来填充由<tr>和<th>组成的表格
8. 进行无缝衔接必须所有图片大小一致,所有表格的高度与宽度与图片大小一致。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们