1

我正在设计这个论坛布局，我想出了一个很好的设计来绘制论坛表格，但是，我不确定这是否可以在 HTML/CSS 中轻松完成。

在我继续绘制整个布局之前，我需要知道这是否可以实现以及如何实现，否则，我将不得不放弃这种效果并重新考虑......

例如，我目前的设计是这样的：

样品表

此示例中的行具有相同的高度，但这只是一个示例。真正的表格实际上会有不同的行高，代码需要考虑到这一点......

如何才能做到这一点？

4

3 回答 3

4

CSS 可以非常轻松地完成类似的操作，前提是您不必随着表格大小的增加而垂直缩放渐变。下面是一个您可以使用的示例，它可以为您提供上面描述的效果。

更新：不知何故，我没有看到斜面（我想我不得不责怪它在晚上太晚了，而且我的视力太模糊了）。我必须放大才能真正看到它们，但我已经更新了我的解决方案以适应它们。您需要添加一个额外的“div”标签才能使此解决方案正常工作，但这是可能的，尽管我认为它在您的图像显示的范围内工作得不太好。不过，它会工作得相当不错。下面我包含一些 jQuery 脚本，它将消除对额外<div />标签的需要。

对于标记，你会使用这样的东西：

<table cellspacing="0">
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
</table>

在你的样式表中，你会使用这样的东西：

td {
    border: 1px solid #777;
}

.bevel {
    background: url('img.png') top left repeat-x;
    margin: -1px;
    border-top: 1px solid #fbfbfb;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #e8e8e8;
}

.side {
    width: 30px;
}

.main {
    width: 170px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

对于图像，使其宽 1 像素。它会重复自己以适应单元格的宽度。如果你想让渐变垂直拉伸，那你就不走运了。CSS 不能缩放图像，只能重复它们。为了制作垂直缩放的背景图像，您需要使用噩梦般的标记或某种 JavaScript 才能使其工作。

为了摆脱<div />标签汤，您可以使用 jQuery 插入标签，这样您就不会弄乱您的源代码。您需要做的就是outerBevel向标签添加一个 ' ' 类<td />，然后调用这个 jQuery 脚本（如果您使用的是 jQuery。我确信其他 JavaScript API 可以做类似的事情）： 

$('.outerBevel').wrapInner('<div class="bevel"></div>');
于 2009-01-11T05:18:28.837 回答
1

对于布局，标准 HTMLtable标记可以完成所有这些工作，并且也适合使用它。

要获得所需的边框效果，请在此处查看不同的 CSS 边框选项：http: //www.w3schools.com/css/css_reference.asp#border

于 2009-01-11T05:10:34.937 回答
0

你可能想要做这样的事情：

table#mytable td {
  border-style: inset;
  border-width: 3px; /* or whatever width you want */
}
于 2009-01-11T05:29:36.600 回答