关于论坛首页格子图片广告无边框的修改。

PS：不知道该发去哪………………{:soso_e101:}，今天弄图片广告发现的问题，已经解决，给大家看看解决的办法

演示：http://www.hpfisher.com/forum.php

很多朋友添加格子广告后发现加入连接后就有空隙和边框，导致按960宽度平分的图片会排列不齐甚至挤出页面。
下面教大家个简单的办法。

首先在格子广告里输入图片代码，2行，一行4个。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
  </tr>
  <tr>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
    <td><a href="连接地址"><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>
  </tr>
</table>

----------------

---

如果想改成新页面打开连接，可以添加红色部分代码。（简单的代码不多解释了，border="0"是图片强行去掉边框。）
<td><a href="连接地址" target="_blank" ><img src="图片地址" alt="" width="240" height="50" border="0" /></a></td>

---

-------------------------


因为我按4个图片均分的，所以图片大小为240*50，即 width="240" height="50" （50是自定义的高度）



因为CSS里默认有边框间隙，所以图片成了这样的，挤出去了。即使在代码里加上border="0" 也是无效的。

我们进行下一步：
FTP中打开编辑../template/default/common/common.css 这个文件
打开后找到
/* 广告 */
/* 页头广告 */ .a_h { padding-top: 5px; }
/* 二级导航广告 */ .a_mu { border: solid {COMMONBORDER}; border-width: 0 1px 1px; background: {COMMONBG}; }
/* 页尾广告 */ .a_f { margin: 5px auto; }
/* 日志内容广告 */ .a_b { float: right; margin: 0 0 5px 5px; }
/* 格子广告 */ .a_t { margin-bottom: 10px; }
  .a_t table { width: 100%; }
  .a_t td { padding: 4px 15px; border: 0px solid {COMMONBORDER}; }
/* 帖内广告 */ .a_pr { float: right; overflow: hidden; }
  .a_pt, .a_pb { background: url({IMGDIR}/ad.gif) no-repeat 0 50%; margin-bottom: 6px; padding-left: 20px; zoom: 1; }
/* 漂浮广告 */ .a_fl, .a_fr { float: right; position: fixed; top: 350px; z-index: 100; }
  .a_fl { left: 0; }
  .a_fr { right: 0; text-align: right; }
  * html .a_fl, * html .a_fr { position: absolute; top: expression(offsetParent.scrollTop+350); }
/* 对联广告 */ .a_cb { top: 20px }
  * html .a_cb { top: expression(offsetParent.scrollTop+20); }
/* 文章漂浮广告 */ .a_af { float:left; margin-right: 10px; margin-bottom: 10px; }
/* 右下角广告 */ .a_cn { position: fixed; right: 10px; bottom: 10px; z-index: 300; }
  * html .a_cn { position: absolute; top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight); }
  .a_cn .close { text-align: right; }
.a_h, .a_mu, .a_c, .a_p, .a_f, .a_t { text-align: center; }

其中红色为我们要修改的部分，将值全部修改为0，即：
/* 格子广告 */ .a_t { margin-bottom: 0px; }
  .a_t table { width: 100%; }
  .a_t td { padding: 0px 0px; border: 0px solid {COMMONBORDER}; }

这样就会让图片间默认的边框和缝隙全部去掉，效果如下：


每行要几张图片，就可以用960除以几得到完全的图片宽度。
我这里用了4张每行，所以图片宽度就是240.效果就是严丝合缝，非常美观，不用再去调试图片的宽度了。


谢谢观看！

希望上面的方法可以帮到需要用到内置格子广告的朋友。

..顶顶.................

感谢分享

这帖子好啊······

这个真心好,学习啦!

这个帖子非常实用，谢谢

做个记号

实在有用……

../template/default/common/common.css ，我使用的模版中，没common.css 文件，怎么办呢