html - 如何在没有表格的情况下设计具有多个颜色 Pane 的网页-6ren

html - 如何在没有表格的情况下设计具有多个颜色 Pane 的网页

转载作者：可可西里更新时间：2023-11-01 13:28:52

<分区>

我想重新设计我的网页设计如下:

除了 Logo “TEST”覆盖紫色边框和白色内容区域的方式外，它基本上很简单，可以全部使用 CSS 完成，无需表格。如果不使用三行三列的表格(以及单元格中的背景图像)，我看不出如何做到这一点，如此“剪切”图像所示:

伪代码如下:

<table>

<!-- HEADER ROW -->
<tr>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
<TD> <!-- Background: Purple/white image stretched horizontally --> 
     <!-- HEADER CONTENT (Logo image "TEST", and menu) --> </TD>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
</tr>

<!-- CONTENT ROW -->
<TD> <!-- Background: Grey color --> </TD>
<TD> <!-- Background: white color --> </TD>
     <!-- PAGE CONTENT --> </TD>
<TD> <!-- Background: Grey color --> </TD>

<!-- FOOTER ROW -->
<tr>
<TD> <!-- Background: Purple color --> </TD>
<TD> <!-- Background: Purple color --> 
     <!-- FOOTER CONTENT --> </TD>
<TD> <!-- Background: Purple color--> </TD>
</tr>

</table>