17DST→一起创造价值 » □-Discuz!教程培训班 » 恰到好处的table

kiman 发表于 2008-1-29 21:00

恰到好处的table

先看图...大家能否发现到??!!:)

[b]原图:[/b]
[b][attach]1857[/attach][/b]

[b]修改后的图:[/b]
[attach]1858[/attach]


首先打开该风格头部模板 header.htm ...然后找到:
[code]<div id="mainl"></div>
<div id="mainr"></div>[/code]再其上加上以下代码:[code] <table><tr>
  <td class="tuijian">
    <b><font color="#FF0000">推荐版区:</font></b> <a href="http://keygod.cn/bbs/forumdisplay.php?fid=8" target="_top"><font color=#CA8EFF>音乐分享</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=9" target="_top"><font color=#FF79BC>美丽贴图</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=16" target="_top"><font color=#0080FF>异度空间</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=7" target="_top"><font color=red>灌水乐园</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=17" target="_top"><font color=#02DF82>QQ空间专区</font></a>
    </td>
  <td width="5"></td>
  <!-- button -->
<td>
  <table cellspacing="0" cellpadding="0" width="75" border="0">
          <tbody>
            <tr>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_c_l.gif" width="5" height="23" /></td>
            
              <td  width="215"  background="http://keygod.cn/bbs/images/other/m_c_c.gif"><a href="http://keygod.cn/bbs/usergroup.html" target="_blank"  style="color:#FFF">等级权限表</a></td>
              <td valign="top" background="http://keygod.cn/bbs/images/other/m_c_c.gif"></td>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_c_r.gif" width="5" height="23" /></td>
            </tr>
          </tbody>
        </table>
  
</td>
<!-- button -->
<td width="10"></td>
<!-- button -->
<td>
  <table cellspacing="0" cellpadding="0" width="60" border="0">
          <tbody>
            <tr>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_p_l.gif" width="5" height="23" /></td>
              
              <td  width="212"  background="http://keygod.cn/bbs/images/other/m_p_c.gif"><a href="http://keygod.cn/bbs/bank.php" target="_blank"  style="color:#FFF">社区银行</a></td>
              <td valign="top" background="http://keygod.cn/bbs/images/other/m_p_c.gif"></td>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_p_r.gif" width="5" height="23" /></td>
            </tr>
          </tbody>
        </table>
  
</td>
<!-- button -->
<td width="10"></td>
<!-- button -->
<td>
  <table cellspacing="0" cellpadding="0" width="60" border="0">
          <tbody>
            <tr>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_y_l.gif" width="5" height="23" /></td>
              
              <td  width="212"  background="http://keygod.cn/bbs/images/other/m_y_c.gif"><a href="http://keygod.cn/bbs/cclist.php" target="_blank"  style="color:#FFF">视听享受</a></td>
              <td valign="top" background="http://keygod.cn/bbs/images/other/m_y_c.gif"></td>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_y_r.gif" width="5" height="23" /></td>
            </tr>
          </tbody>
        </table>
  
</td>
<!-- button -->
<td width="10"></td>
<!-- button -->
<td>
  <table cellspacing="0" cellpadding="0" width="60" border="0">
          <tbody>
            <tr>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_c_l.gif" width="5" height="23" /></td>
              
              <td  width="212"  background="http://keygod.cn/bbs/images/other/m_c_c.gif"><a href="http://keygod.cn/bbs/luck.php" target="_blank"  style="color:#FFF">开心抽奖</a></td>
              <td valign="top" background="http://keygod.cn/bbs/images/other/m_c_c.gif"></td>
              <td width="5"><img src="http://keygod.cn/bbs/images/other/m_c_r.gif" width="5" height="23" /></td>
            </tr>
          </tbody>
        </table>
  
</td>
<!-- button -->
<td width="15"></td>
<td class="tuijian">
<b><font color="blue">新开版区:</font></b> <a href="http://keygod.cn/bbs/forumdisplay.php?fid=15" target="_top"><font color=#00AEAE>游戏新闻</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=14" target="_top"><font color=#00AEAE>社会新闻</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=16" target="_top"><font color=#0080FF>异度空间</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=17" target="_top"><font color=#02DF82>QQ空间专区</font></a>  <a href="http://keygod.cn/bbs/forumdisplay.php?fid=18" target="_top"><font color=#FF8040>街舞潮暴</font></a>
</td>
</tr>
  </table>[/code][b][color=red]以上有部分代码是我自己的...希望会员自行修改..class=tuijian    好像是多余的..- -..我忘记删除了.1.![/color][/b]

[b]我觉得这样的效果很不错.!!!方便人流览!!![/b]
[b]唯一可能不好的就是速度可能会影响少少少...[/b]
[b]尽量很少..因为我把图片优化td载入..代码也没有遗留..应该是没有问题的..[/b]
[b][color=red]IE和部分流览器下测试没有问题..!!![/color][/b]
[b][color=#ff0000][/color][/b]
[b][color=black]给出了演示图就不给地址了..免得当AD了..:) [/color][/b]
[b][color=#ff0000][color=black]如果人为简单的...请WS..但别骂我..!:)[/color] [/color][/b]
[b][color=#ff0000][/color][/b]

[b][color=#ff0000][/color][/b]

[[i] 本帖最后由 kiman 于 2008-1-29 22:04 编辑 [/i]]

水月あ无痕 发表于 2008-1-29 23:14

适当的地方使用适当的技术是最好的.....
比如你不懂CSS却硬要用CSS,可能效果适得其反....
再次谢谢LZ的分享

kiman 发表于 2008-1-31 00:43

[quote]原帖由 [i]水月あ无痕[/i] 于 2008-1-29 23:14 发表 [url=http://www.17dst.com/redirect.php?goto=findpost&pid=30706&ptid=4544][img]http://www.17dst.com/images/common/back.gif[/img][/url]
适当的地方使用适当的技术是最好的.....
比如你不懂CSS却硬要用CSS,可能效果适得其反....
再次谢谢LZ的分享 [/quote]

对的..!!
虽然CSS是比较好..!!
但是可能会复习了少许....
始终是HTML比较方便..!!:lol

查看完整版本: 恰到好处的table