0

2行3列のテーブルがあります。最初の行はボディの目的を果たし、2番目の行はフッターの目的を果たします。

ルックアンドフィールが良くなるように、CSSを使用してフッターをデザインしたいと思います。画像を追加することはできますが、画像ごとに隙間があり、うまく撮れません。

行trには3つの列があり、それぞれtdに1つの画像があります。

以下は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;
    }

助けてください。私は1週間試しています:(私もGoogleを通して試しました。

予想される形式：

4

3 に答える 3

1

レイアウトにテーブルを使用したい場合は、次の CSS を<table>タグに適用してみてください。

 border-collapse: collapse;

これにより、フッター画像間のスペースが取り除かれます。

于 2012-05-08T13:27:43.277 に答える
1

テーブルを Div 内にラップし、以下の CSS クラスを適用できます。サンプルには 4 つの曲線の境界線がすべて含まれています。必要に応じて半径の値を変更できます。

.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;
}
于 2012-05-08T12:35:39.057 に答える
0

HTML の table タグに cellspacing='0' を追加してみてください

于 2012-05-17T15:18:47.773 に答える