90px的幻影保证金应用于我的网页正文？

时间：2017-05-29 14:00:30

标签： html css

在为我的网站创建登录页面时，我向登录表单div添加了90px的边距（ID为“LogIn”），以使其能够远离标题。 这个过程适用于我网站的所有其他页面，但不适用于此网站吗？

问题是整个主体的窗口顶部是90px而不是LogIn div？

这似乎是login.css 的第7行导致问题，因为当我删除它时，一切都恢复正常，但登录表单仍然被标题隐藏。

非常感谢任何帮助，如果您需要更多信息，请询问！

如果你想看到它的实际效果，这里还有一个指向该网站的链接： http://jakehowell.me/login.php

enter image description here 

<html>
    <head>
        <title>Flash Crash</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
<link rel="shortcut icon" type="png" href="../assets/favicon.png">
<link rel="shortcut icon" type="script" href="../script/validate.js">
<meta name="viewport" content="width=device-width">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <link rel="stylesheet" type="text/css" href="../css/login.css">
    </head>

    <body>
        <div id="wrapper">
                <div id= "header">

       <h1>Flash Crash</h1>

            <a href="../index.php" hreflang="en-gb" >Home</a><a href="../login.php" hreflang="en-gb" >Login</a><a href="../feedback.php" hreflang="en-gb" >Feedback</a> </div>
                <div id="LogIn">
                    <h1>Log into Flash Crash</h1>
                    <form id="loginform" name="loginform" method="post" action="../php/login.php" onsubmit="return validateForm()">
                    <div class="login-field">
                        <input type="text" name="username" placeholder="Username"
                        value=''  >
                                            </div>

                    <div class="login-field">
                        <input  type="password" name="password" placeholder="Password">
                                            </div>

                        <button type="submit" value="Submit">Log In</button>
                        <a id="forgotPW" value="forgotPW" action="http://www.google.com/">Forgot Password</a>

                    </form>
                </div>        
                    <div id="DroppingBox">
                        <p>New to Flash Crash? <a id="Drop">Create an Account</a></p>

                         <div id="SignUp">
                            <h1>Sign Up</h1>
                            <form id="signupform" name="signupform" method="post" action="../php/create-account.php">

                                <input id="signup_firstname" type="text" name="firstname" placeholder="First Name" maxlength="50" size="30">
                                <input id="signup_lastname" type="text" name="lastname" placeholder="Last Name" maxlength="50" size="30">
                                <input id="signup_username" type="text" name="username" placeholder="Username" >
                                <input id="signup_password" type="password" name="password" placeholder="Password">
                                <input id="signup_confirmpassword" type="password" name="confirmpassword" placeholder="Confirm Password">

                                <input id="signup_email" type="text" name="email" placeholder="Email Address" maxlength="80" size="30">
                                <input id="signup_contactnumber" type="text" name="contactnumber" placeholder="Contact Number" maxlength="30" size="30">

                                <button id="signup_submit" type="submit" value="Submit">Sign Up</button>

                            </form>
                        </div>
                  </div>
        </div>
    </body>
</html>

stylesheet.css中：

html, body {
margin: 0;
padding: 0;
font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; 
min-height: 100%;
}

h1 {
    font-size: 22;
    margin: 0px;
}

h2{
    padding:5px;
    margin: 0px;
}

h3{
    padding:5px;
    margin: 0px;
}

p {
    margin: 0;
    padding: 5;
}

#wrapper {
    position: relative; 
    min-height: 100%;
    background-color: #eee;
    background-size: cover;
}

#header {
    padding: 0 50 0 0;
    margin:0;
    position: fixed;
    width:100%;
    height: 90px;
    background-color: #ffbb00;
    text-align: right;
    line-height: 90px;
}
#header h1 {
    padding: 0 0 0 5;
    margin:0;
    float: left;
    text-align: center;
    display: inline-block;
    line-height: 90px;
    font-size:80px;
    color: #00a1ff;
    font-style: italic;
    text-transform: uppercase;
}
#header a {
    padding: 0 25 0 25;
    margin:0;
    transition: background .5s;
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    height:100%;
    text-decoration: none;
    text-align: center;
    line-height: 90px;
    font-size: 25px;
    letter-spacing: 4px;
    color: #fff;
    text-transform: uppercase;
}

#header a#selected {
    background: #ff9f00;
    cursor: default
}

#header a:hover {
    transition: background .5s;
    background: #ffaa00
}

login.css：

@charset "utf-8";

#LogIn {
    display: block;
    background-color: #fff;
    padding: 0 20 10 100;
    margin-top: 90px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    height: auto;
    width: auto;
    vertical-align: middle;
    font-family: sans-serif;
    color: #292f33;
}

.login-field {
    display: block;
}

#LogIn input{
    display: inline-block;
    margin: 0 0 10 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

#forgotPW {
    color: #1b95e0;
    cursor: pointer;
    font-size: 15;  
}

#DroppingBox {
    background-color: #eee;
    height: auto;
    border-radius: 0 0 5px 5px;
    padding: 10 0 10 100;
    font-family: sans-serif;
    font-size: 13;
    color: #666;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
}

#DroppingBox a {
    color: #1b95e0;
    cursor: pointer;
}

#SignUp {
    display: none;
}

#SignUp input[type="text"], #SignUp input[type="password"] {
    display: block;
    clear: right;
    margin: 0 0 5 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

/*#SignUp input[type="password"] {
    display: block;
    clrar: right;
    margin: 0 0 5 0;
    padding: 5;
    width: 350;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
}

#SignUp input[type="submit"] {
    float: left;
    color:red;
}*/

.error {
    border: 1px solid red !important;
}

.errortext {
    display: inline-block;

    color: red;
}

@media screen and (max-width: 640px) {

    #LogIn {
        padding: 0 10 1 10;
    }

    #LogIn input[type="text"]{
        width: 100%;
    }

    #LogIn input[type="password"]{
        width: 100%;
    }

    #DroppingBox {
        padding: 5 10 5 10;
    }

    #SignUp {
        padding: 0;
    }

    #SignUp input[type="text"], #SignUp input[type="password"] {
        width: 100%;
    }

}

2 个答案:

答案 0 :(得分：0)

更改#LogIn以删除上边距：

#LogIn {
  display: block;
  background-color: #fff;
  /* margin-top: 90px; causing problem */
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-bottom: none;
  height: auto;
  width: auto;
  vertical-align: middle;
  font-family: sans-serif;
  color: #292f33;
}

答案 1 :(得分：0)

您必须在float: left div上添加#LogIn：

#LogIn {
    display: block;
    background-color: #fff;
    padding: 0 10px;
    margin-top: 120px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    height: auto;
    width: 100%;
    vertical-align: middle;
    font-family: sans-serif;
    color: #292f33;
    float: left;
}
相关问题
最新问题