-1

画像へのリンク

CSS を使用して、テーブルを画像のように見せたいと思います。側でできる限りやってみましたがうまくいかなかったので、何か方法はありませんか？よろしくお願いします。

ここに私のHTMLコードがあります

<div id="login_fields"> 
    <form id="login_form">
        <table>
          <tr>
            <td>User</td>
            <td><input type="text" name="user" id="user" /></td>
          </tr>
          <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password" /></td>
          </tr>
        </table>
    </form>
</div>
4

2 に答える 2

2

HTML を次のように修正することをお勧めします (これtableはまったく不要です)。

<form action="#" method="post">
    <!-- using a label means that clicking the text automatically focuses
         the relevant input, the value of the 'for' attribute must match the 'id'
         of the relevant input though -->
    <label for="uName">User</label>
    <input id="uName" />
    <label for="pass">Password</label>
    <input type="password" id="pass" />
</form>

次のCSSを使用します（好みに応じて色と寸法を修正します）：

form {
    /* aesthetics, just to move the label/input pairs from the edge of the screen */
    padding: 1em;
}

label,
input {
    float: left; /* to allow for width to be given, and for clearing */
    border: 1px solid #999; /* amend the following as required */
    line-height: 1.2em;
    padding: 0.2em 0;
    font-size: 1em;
    height: 1.4em;
    margin-bottom: 0.8em;
}

input + label {
    clear: left; /* this styles a label element that immediately
                    follows an input, and forces a new-line */
}

label {
    text-indent: 0.5em; /* moves the text away from the curved corners */
    width: 30%;
    border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}

input {
    width: 60%;
    border-radius: 0 0.5em 0.5em 0;
    outline: none;
}

input:focus,
input:active {
    box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
                                       default outline, and gives visual
                                       feedback to show the input is focused/active */
}

JS フィドルのデモ。

于 2013-01-23T16:34:06.680 に答える
0

ユーザーとパスワードのTDはテーブルヘッダーであるため、THに置き換え始めます。次に、2つの画像を作成します。1つは左側に曲線があり、もう1つは右側に曲線があります。次に、背景に適用します。CSSは次のようになります。

table tr th {背景：url（bg-left.png）no-repeat; 幅：100px; 高さ：40px; }

table tr td {background：url（bg-right.png）no-repeat; 幅：250px; 高さ：40px; }

読みやすくするために、フォントのスタイルを削除しました。

于 2013-01-23T16:25:43.273 に答える