我是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;
}
只是为了给所有人,以下图片是它目前的样子:
答案 0 :(得分:0)
使用此srtuctuer:
<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;
}