Html 我的登录框未正确显示_Html_Css

Html 我的登录框未正确显示

html css

Html 我的登录框未正确显示,html,css,Html,Css,我正在尝试创建一个类似于此的登录框，但这就是我得到的这是我的代码login.html <html> <head> <title>Login Page</title> <script type="javascript" src="js/login.js"></script> <link rel="stylesheet" type="text/css" href=

我正在尝试创建一个类似于此的登录框，但这就是我得到的

这是我的代码

login.html

<html>

    <head>
        <title>Login Page</title>

        <script type="javascript" src="js/login.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

    <body>
    <div class="logo">
        <img src="images/logo.gif"/>
    </div>

    <div class="line">
    </div>

    <div class="loginImage"> 
        <img src="images/login_banner.jpg" />
    </div>

    <div class="loginTop">
        <img src="images/log_top.gif" />
    </div>


    <div class="loginBox">
        <br/>

        <div class="innerLogin">
            <text>Secure Login</text>
            <br/><br/>
            <img src="images/field_top.gif" />
            <div class="innerLoginBox">
                <br/>
                <div class="loginControls">
                    Login Id
                    <div style="position:relative;top:15px;">
                        <input type="text" name="txtLogin" />
                    </div>

                    <div style="position:relative;top:30px;">
                        Password
                    </div>

                    <div style="position:relative;top:36px;">
                        <input type="password" name="txtPass" / >
                    </div>

                    <div style="position:relative;top:45px;">
                        <input type="button" value="Log In" />
                    </div>
                </div>

            </div>
            <img src="images/field_bottom.gif" />
        </div>
    </div>


    <div class="loginBottom"> 
        <img src="images/log_bottom.gif" />
    </div>
    </body>

</html>

.logo
{
    position:absolute;
    top:15px;
    left:80px;

}

.line{

    position:absolute;
    top:65px;
    left:80px;
    width:955px;
    height:5;
    background:#B60548;
}

.loginImage
{
    position:absolute;
    top:85px;
    left:80px;
}

.loginTop
{
    position:absolute;
    top:85px;
    left:770px;
}

.loginBottom
{
    position:relative;
    top:339px;
    left:762px;
}

.loginBox
{
    position:absolute;
    top:88px;
    left:770px;
    background-color:#E5E5E5;
    width:255px;
}

.innerLogin
{
    position:relative;
    left:15px;
}

.innerLoginBox
{
    position:relative;
    background-color:white;
    width:226px;
}

.loginControls
{
    position:relative;
    left:10px;
}

text
{
    color:#A4003F;
    font: bold 16px Arial,Helvetica,sans-serif;
}

我不知道我的html代码有什么问题。有人能给我指出正确的方向吗？

谢谢。

删除

位置：相对和顶部：xx然后替换为填充顶部：xx

<div class="loginControls"> Login Id
  <div style="padding-top:10px">
    <input type="text" name="txtLogin" />
  </div>
  <div style="padding-top:10px"> Password </div>
  <div style="padding-top:10px">
    <input type="password" name="txtPass" />
  </div>
  <div style="padding-top:10px">
    <input type="button" value="Log In" />
  </div>
</div>

登录Id
密码
您也可以更新此
<div style="padding-top:10px">
  <input type="button" value="Log In" />
</div>  



到
您甚至可以使用填充属性。它按如下顺序接受4个值[右上-左下]。你可以很容易地记住它是顺时针的。例如：padding:10px 0px 10px 0px
<div style="padding-top:10px;padding-bottom:10px">
  <input type="button" value="Log In" />
</div>