0

私はHTMLデザインに不慣れです。htmlとCSSを使用してデザインしなければならないページの小さなセクションがあります。

これは私が現在取り組んでいる部分です

ログインボタンの画像と背景画像があります。添付の写真と同じ形に見えるように、このHTMLを開発する方法。

今まで私はこれを試しましたが、歪んで見えます：

<div class="dvEmployee">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <br />
                <span class="EmployeeLable">Enter your employee number to vote </span>
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
                    Height="49px" Width="161px" /><br />
                <asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
                    ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
                <asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
            </td>
            <td>
                <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
                    AlternateText="Log In" OnClick="imgBtn_Click" />
            </td>
        </tr>
    </table>
</div>

私が作成したCSSクラス：

.dvEmployee
{
    background-image: url('images/log_in_window.png');
    background-repeat: no-repeat;
    width: 466px;
    height: 206px;
    position: relative; /* padding: 100px 30px;*/
    margin: 180px 107px;
    z-index: 2000px;
}

.lblError
{
    font: Arial Regular 12pt #000000;
}

.EmployeeLable
{
    font-family: Arial regular;
    font-size: 29pt;
    color: #404040;
    line-height: 17px;
}

すべてを与えるために、次の画像はそれが現在どのように見えるかです：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

4

1 に答える 1

0

この構造体を使用してください：

 <table>
    <tr>
        <td colspan="2">
            <br />
            <span class="EmployeeLable">Enter your employee number to vote </span>
        </td>

    </tr>
    <tr>
     <td class="center">
        <asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
                     Height="49px" Width="161px" /><br />
        <asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
                            ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
        <asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
    </td>
    <td class="center">
        <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
                            AlternateText="Log In" OnClick="imgBtn_Click" />
    </td>
    </tr>
</table>

css:

.center{
text-align:center;
}
于 2012-10-29T08:54:11.450 に答える