Question

我上周学习了如何通过HTML设计UI。我基本上认为我的网站布局一切都很完美，并准备演示。但我不小心调整了我的网页浏览器的大小，并观察到所有元素都相互重叠（即使在其他机器上也有相同的行为）。

我已经搜索了这个问题，但没有一个是有用的。基本上，我不知道在哪里修改代码。请让我知道如何解决这个问题。

<!Document html>
<html lang="en">
<base href="file:///C:/Users/myuser/Pictures/HTML/">
<head>
    <title>This is title</title>
</head>
<style>
    body {
        background-color:#FDF5E6;
        background-image: url("file:///C:/Users/myuser/Pictures/HTML/bicycles.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
<body>
    <h1 align="center" style="font-family: Colonna MT;font-size:50px;color:brown;position:absolute;top: 3%; left: 41%;">This is website heading</h1>
    <p style="color:DarkSalmon;position:absolute;top: 10%; left: 48%;"><i>"This is caption"</i>
    </div>
    <h2 style="color:skyblue; position:absolute;top: 20%; left: 39%;">Login</h2>
    <div style="color:Teal;position:absolute;top: 26%; left: 39%; width:300px;height:125px;border:1px solid #000;"></div>
    <form name="login" style="color:SandyBrown;font-size:larger;position:absolute;top: 27%; left: 40%;">
            Username : <input type="text" name="userid"/><br></br>
            Password : <input type="password" name="pswrd"/><br></br>
            <input class="btn btn-primary" style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 50%;" type="button" onclick="check(this.form)" value="Login"/>
        <input style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 75%;" type="reset" value="Cancel"/>
    </form>
    <a style="color:MediumVioletRed;position:absolute;bottom: 58%; left: 50.5%;" href="Forgot Password">Forgot Password</a>
    <p style="color:YellowGreen;font-size:20px;position:absolute;bottom: 53%; left: 39%;">Don't have an account?</p>
    <a style="color:Purple ;font-size:20px;position:absolute;bottom: 55%; left: 50.5%;" href="Signup.html" onClick="return popup(this, 'Signup')">Sign up</a>
    <p style="font-size:20px;position:absolute;bottom: 53%; left: 54.5%;">here</p>

    <SCRIPT TYPE="text/javascript"> 
         function popup (mylink, windowname) { 
            if (! window.focus)
                return true; 
            var href; 
            if (typeof(mylink) == 'string') 
                href=mylink; 
            else 
                href=mylink.href; 
            window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
            return false; 
        } 
    </SCRIPT>

</body>
</html>

Answer 1

当您重新调整视图端口大小时，您正在使用position: absolute;这就是为什么元素重叠的原因。您不应该将此属性用于此类布局。相反，你应该使用像float: left;这样的东西。我建议你深入了解网站布局，网格模型和引导程序。

Div positioning examples

float: left;使div与左侧对齐。

float: right; - 对齐右边的div。

position: absolute;让它们像气球一样漂浮在周围，让你选择它的位置。

Answer 2

我为您创建了一个简单的解决方案。我的风格并不多，但你应该能够自己做到这一点。

＆＃13;

/**
*    JS / jQuery
*/
$('#btn-login').on('click', function(){
	alert('Do login');
});

$('#btn-cancel').on('click', function(){
	$('.login-form')[0].reset();
});

＆＃13;

/**
*    CSS
*/
.login-box{
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px 10px;
}

.login-box a{
  display: block;
  text-align: right
}

.login-form input,
.login-form .btn{
  border-radius: 0px;
}

.button-container{
  margin: 10px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
      <h1 class="text-center">The website heading</h1>
      <p class="lead text-center">"This is caption"</p>

      <h2>Login</h2>
      <div class="login-box">
        <form action="post" class="login-form">
          <div class="form-group">
            <label for="user-name">Username</label>
            <input type="text" class="form-control" name="user" id="user-name">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" id="password">
          </div>
          <div class="button-container text-right">
            <button class="btn btn-default" type="button" id="btn-cancel">Cancel</button>
            <button class="btn btn-primary" type="button" id="btn-login">Login</button>
          </div>
        </form>
        <a href="#">Forgot password?</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

我使用了CSS的bootstrap框架，因为我认为这是初学者创建响应式移动优先设计的最快方式。您可以访问他们的website了解更多信息。

我将jQuery用于javascript，虽然我没有太多使用它。

为了保持代码清洁，可读和组织良好，您应该将html，css，javascript分开。如果您有任何疑问，请随时提出。

调整浏览器大小时如何防止UI元素相互重叠？

2 个答案: