2

我正在使用以下代码来设计我的主页。输出（如下所示）未正确显示。您可以看到横幅向最左侧移动，导航链接之间有很大的差距。这个怎么设置？可以仅使用 DIV 标签而不是 TABLE 来完成吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>
    First Website
  </title>
</head>

<body>
      <table  id="main" align="center" width="600 px">
        <tr  id="trBanner">
            <td  id="tdBanner">
                <img src="../../../My Pictures/banner copy.bmp.jpg"
            </td>
        </tr>
        <tr  id="trNavLinks">
            <td  id="lnkHome">
                  <a href="" id="lnkHome" name="lnkHome">Home</a>
            </td>
            <td  id="lnkLife">
                  <a href="" id="lnkLife" name="lnkLife">Life</a>
            </td>
            <td  id="lnkTeachings">
                  <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a>
            </td>
            <td  id="lnkExperiences">
                  <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a>
            </td>
            <td  id="lnkPhotoGallery">
                  <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a>
            </td>
            <td  id="lnkReach">
                  <a href="" id="lnkReach" name="lnkReach">How to Reach</a>
            </td>
            <td  id="lnkContact">
                  <a href="" id="lnkContact" name="lnkContact">Contact Us</a>
            </td>
        </tr>
      </table>
</body>

</html>

替代文字 http://www.freeimagehosting.net/uploads/b122c4ef21.jpg

4

4 回答 4

6

没有看到你的代码很长时间 - 不要使用表格！

我知道对于那些在网页设计中长期使用表格开发的人来说很难，但相信我 - 在你学会了如何使用 CSS 和 DIV-Tags 设计它之后，你会为此感谢上帝！

这是给你的教程：http: //www.colorplexstudios.com/articles/div_web_design_tutorial/

如果你想回答你的代码问题：这是因为第一行有 1 个单元格，第二行有 3 个单元格。使用 colspan 属性。你可以在这里找到一个教程：http: //www.htmlcodetutorial.com/tables/index_famsupp_30.html

于 2010-03-21T15:58:21.110 回答
1

不要使用表格，使用 div 标签和位置属性的正确组合。它们比表格好得多，如果您需要进行任何更改，它们也更易于编辑。

于 2010-03-21T16:09:07.807 回答
1

Eek，删除表格。改用 UL，在 CSS 中使用 display: inline 。然后根据自己的喜好调整它（边距、填充）。将其放在 div 中，并将其放置在您的页面中。

于 2010-03-21T16:11:41.807 回答
1

正如其他人所建议的那样，表格并不是最适合您网站布局的元素。但是，简单的解决方法是：

<td  id="tdBanner" colspan="7">

这将使您的横幅跨越您的桌子的整个宽度。附带说明一下，页面上的 id 应该是唯一的，因此如果您需要为td标签提供 id，它们应该与a标签不同。

我会查看其他人链接到的一些 CSS 教程。

于 2010-03-21T16:16:28.663 回答