我的目标是制作一个类似于“相框”的 HTML 页面。换句话说,我想做一个被4张图片包围的空白页。
这是我的代码:
<table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table>
CSS类如下:
.bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; height: 280px; } .bRight { width: 212px; height: 280px; background-image: url('../Images/BackRight.jpg'); } .bBottom { width: 960px; height: 111px; background-image: url('../Images/BackBottom.jpg'); }
我的问题是表格的单元格之间出现细白线,我的意思是图片的边框不连续。我怎样才能避免这些空白?
<table cellspacing="0" cellpadding="0">
在 CSS 中:
table {border: none;}
编辑: 正如 iGEL 所指出的,此解决方案已正式弃用(尽管仍然有效),因此如果您从头开始,您应该使用 jnpcl 的边框折叠解决方案。
到目前为止,我实际上非常不喜欢这种变化(不要经常使用表格)。它使一些任务变得更加复杂。例如,当您想在同一位置(视觉上)包含两个不同的边框时,一个是 TOP 用于一行,第二个是 BOTTOM 用于另一行。它们将折叠(= 仅显示其中一个)。然后你必须研究如何计算边框的“优先级”以及哪些边框样式“更强”(双与实心等)。
我确实喜欢这样:
<table cellspacing="0" cellpadding="0"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> ---------- .first {border-bottom:1px solid #EEE;} .second {border-top:1px solid #CCC;}
现在,随着边框崩溃,这将不起作用,因为总是移除一个边框。我必须以其他方式来做(有更多的解决方案)。一种可能性是使用带有 box-shadow 的 CSS3:
<table class="tab"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table>