|
发信人: gaotian.(高天) 整理人: gaotian.(2002-03-23 11:53:37), 站内信件 |
| 先看以下例子：
第一步 
这是一张完整的图片，尺寸为：220*100。 但是如果我们想在这张图上做三个不同的连接，唯一的方法就是利用 热点连接，可是社区里发贴并不支持这样的html语言。 第二步 那么现在剩下唯一的方法只能只切割三张图片，然后分别做好相应的连接。 以下为利用photoshop切割后的三张图片： 1.  尺寸：220*56
2.  尺寸：220*18
3.  尺寸：220*26
4.  ←左边为一张透明的图片，一会要做帮助用
第三步 正常社区发贴状态下三张图片组合起来的效果如下：
就像大家所看到的，图片和图片之间就会出现一道间隔，破坏了整体的感觉， 如何消除这道间隔呢？LOOK！ 第四步 以下内容若要正常显示请将[]换成<> 第三步的代码为： [img border="0" src="http://ymca.skyluna.com/qm/images/1.gif"] [img border="0" src="http://ymca.skyluna.com/qm/images/2.gif"] [img border="0" src="http://ymca.skyluna.com/qm/images/3.gif"] 现在做些改动： [img border="0" src=http://ymca.skyluna.com/qm/images/1.gif "][img border="0" src=http://ymca.skyluna.com/qm/images/2.gif][img border="0" src=http://ymca.skyluna.com/qm/images/3.gif] 效果如下： ----
至此我们看到第二张图片和第三张图片换行的间隔已经消失，可是第一张 和第二张却还在同一行内。这是由于图片的宽度（原来为200）太小了。 现在让我们再做些改动： [img border="0" src=http://ymca.skyluna.com/qm/images/1.gif "][img src=http://ymca.skyluna.com/qm/images/4.gif width="250" height="10"][img border="0" src=http://ymca.skyluna.com/qm/images/2.gif][img src=http://ymca.skyluna.com/qm/images/4.gif width="250" height="10"][img border="0" src=http://ymca.skyluna.com/qm/images/3.gif] 我们在图片后面加上一张透明的图片，并设置宽度： width="250" 目的在于增加原来第一行图片的宽度，使得第二张图片： http://ymca.skyluna.com/qm/images/2.gif 自动切换到第二行 注意：透明的图片的宽度要适中，这做的例子， 第一张图片的宽度为220，现透明的图片宽度为250，总和宽度为470。 建议都把总和的宽度做到470，这样的话在800*600和1024*768的分辨率下都能正 常显示。 显示的效果如下： ----
至此，可以说整个工作完成了90%了，连接的部分都只是很简单的步骤了。 第五步 [a href="http://fe2.sh.163.com docidx?b=Banner"][img border="0" src=http://ymca.skyluna.com/qm/images/1.gif alt="◇电脑技术◇网站旗帜◇" width="220" height="56"][/a][img src=http://ymca.skyluna.com/qm/images/4.gif width="250" height="10"][a href="http://fe2.sh.163.com docidx?b=poolworld"][img border="0" src=http://ymca.skyluna.com/qm/images/2.gif alt="◇休闲时尚◇台球世界◇" width="220" height="18"][/a][img src=http://ymca.skyluna.com/qm/images/4.gif width="250" height="10"][a href="http://ymca.skyluna.com/" target="_blank"][img border="0" src=http://ymca.skyluna.com/qm/images/3.gif width="220" height="26" alt="◇个人主页◇沸 点◇"][/a] 效果如下： ----
一张图片三个不同的连接。 PS：以上为发贴时候的正确代码，设置为签名 的时候请把[BR]去除！ 完工……………………………………………… 
广州社区-动漫图酷-《漂亮MM》 |
|
[关闭][返回] |