Question

我有一个有两行三列的表。第一行用于主体，第二行用于页脚。

我想使用CSS设计页脚，以便外观更好。我可以添加图像，但每张图像之间存在间隙，因此效果不佳。

行tr有三列，每个td都有一个图片。

以下是HTML代码。

<tr>
    <td class="FooterLeftBG"> //left css class
    </td>
    <td style="width: 85%;" class="FooterBG"> //middle css class
        <table style="width: 85%">
            <tr>
                <td align="left">
                some text
                </td>
                <td style="padding-top: 1px">
                some text</td>
            </tr>
        </table>
    </td>
    <td  class="FooterRightBG"></td>//right css class
</tr>

这是CSS代码：

td.FooterLeftBG // CSS class for left td, used to make left hand side curve footer 
    {
    background: url('footer-leftbg.png') bottom left;
    height:35px;
    width:12px;
    padding:0px;
    float:right;
    }
td.FooterRightBG // CSS class for right td, used to make right hand side curve footer
    {
    background: url('footer-right-bg.png') bottom right;
    height:35px;
    padding:0px;
    width:12px;
    float:left;
    }
td.FooterBG // CSS class for td holding the footer contents
    {
    background:url('footer-middle-bg.png');
    background-repeat:repeat-x;
    border-collapse:collapse;
    height:35px;
    width:5px;
    }

请帮忙。我已经尝试了一周:(我也尝试过谷歌。

预期格式：

Answer 1

您可以将表格包装在Div中，并将以下CSS类应用于它。样本具有全部四个弯曲边框，您可以根据您的要求修改半径值：

.container {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    box-shadow: 0 0 10px #909090;
    cursor: default;
    display: none;
    left: 12px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    position: relative;
    text-align: left;
    z-index: 100;
}

Answer 2

如果您想坚持使用表格进行布局，可以尝试将以下CSS应用于<table>标记：

 border-collapse: collapse;

这可能会消除页脚图像之间的空间。

Answer 3

尝试将cellspacing ='0'添加到HTML

中的表格标记中

如何使用css将页脚右侧和左侧作为曲线

3 个答案: