0

我正在学习 HTML 和 CSS，我做了一些带有导航、侧边栏、浮动内容等的简单网站。

我进入了一个只用表格制作的网站（所以我用谷歌搜索，发现这是一件坏事，然后我也用谷歌搜索了如何替换它，但我找不到任何不是 CSS3 的东西 - 重要，我不还想使用 CSS3！）。

所以基本上，这个网站有 3 列：表格上方的标题，然后分成 3 列<tr>作为侧边栏和主要内容。

右侧的每个小侧边栏由另一个表格组成，边框有一个名为“content-right”、“content-left”的图像，带有“关闭边框并打开它”的样式，以及中间的图像那（我猜）它延伸以保持风格。

我相信，当我阅读时，表格是设置网站样式的不好方法……但我觉得这是设置侧边栏样式以使其从各个方面看起来都像我想要的唯一方法。

我希望你明白我的意思，我不记得我看过的网站，我再也找不到了，我试图尽可能清楚地解释，对不起，如果它不好，我还在正如我所说的学习过程。

所以基本上，如果你明白我的意思，你能告诉我，还有哪些其他方式（可能我猜是 div，或者可能是边框？）可以实现这个目标？

4

2 回答 2

2

首先，要明白使用tables并不是万能的；它们仅在用于制作布局时才被认为是坏的。您网站的布局基本上是一个大纲，它定义了您的内容的分发和排列方式。

在您的情况下，这是一个仅使用CSS并创建相同布局的示例：

<div class = "header">
    Header!
</div>
<div class = "container">
    <div class = "sidebar">
        Sidebar 1!
    </div><div class = "main">
        Main content!
    </div><div class = "sidebar">
        Sidebar 2!
    </div>
</div>

CSS：

body {
    font-family: Arial, Helvetica, Sans-Serif;
    color: white;
}
.header {
    margin: 10px 10px 10px 10px;
    height: 100px;
    background-color: rgb(0, 140, 200);
}
.container {
    height: 500px;
    margin: 10px 10px 10px 10px
}
.sidebar {
    width: 15%;
    height: 100%;
    background-color: rgb(34, 177, 76);
    display: inline-block;
}
.main {
    background-color: rgb(0, 140, 200);
    display: inline-block;
    width: 70%;
    height: 100%;
}
于 2012-08-18T11:09:02.700 回答
0

您告诉您学习 HTML 和 CSS，如果学习者不是很好的做法，请尝试在 960 网格系统 CSS 中创建表格。 这个链接可以帮助你

于 2012-08-18T11:07:21.717 回答