我想按照图片所示设置我的桌子

Question

我希望我的表看起来像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>

Answer 1

我建议修改您的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 Fiddle demo

Answer 2

我开始用TH替换用户和密码的TD，因为它们是表头。然后我会生成两个图像，一个是左边的曲线，另一个是右边的曲线，然后我会在后台应用。 CSS看起来像这样：

table tr th {background：url（bg-left.png）no-repeat;宽度：100px;身高：40px; }

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

我删除了字体样式以便于阅读。