调整浏览器大小时如何防止UI元素彼此重叠?

拉胡尔

我花了最后一周学习如何通过HTML设计UI。我本来以为自己的网站布局可以满足所有需求并可以进行演示,但是我无意中调整了Web浏览器的大小,并发现所有元素都相互重叠(即使在其他机器中也是如此)。

我已经用谷歌搜索了这个问题,但是都没有帮助。基本上,不确定在哪里修改代码。请让我知道如何解决这个问题。

<!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>

蒂莫

我为您创建了一个简单的解决方案。我的样式不多,但是您应该可以自己完成此操作。

/**
*    JS / jQuery
*/
$('#btn-login').on('click', function(){
	alert('Do login');
});

$('#btn-cancel').on('click', function(){
	$('.login-form')[0].reset();
});
/**
*    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;
}
<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>

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

我没有使用jQuery,而是使用jQuery进行javascript。

为了使您的代码干净,易读且井井有条,您应该将html,css和javascript分开。如果您有任何问题随时问。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整浏览器窗口大小时,li元素重叠

来自分类Dev

调整浏览器窗口大小时如何防止div元素下降?

来自分类Dev

调整浏览器大小时如何防止HTML元素移动?

来自分类Dev

调整浏览器大小时如何防止HTML元素移动?

来自分类Dev

调整浏览器大小时,如何使元素移动更快?

来自分类Dev

调整浏览器大小时内容重叠

来自分类Dev

当我调整浏览器大小时,元素与图像重叠

来自分类Dev

调整浏览器大小时如何停止调整元素大小

来自分类Dev

元素总是在调整浏览器大小时移动

来自分类Dev

调整浏览器大小时,如何包装菜单?

来自分类Dev

如何防止浏览器高度调整大小影响元素的位置

来自分类Dev

调整浏览器大小时,为什么我的div重叠?

来自分类Dev

重新调整浏览器大小时,我有2个div重叠

来自分类Dev

调整浏览器大小时引导导航栏链接重叠

来自分类Dev

调整浏览器窗口大小时,如何正确调整textarea的大小?

来自分类Dev

浏览器窗口调整大小时如何在CSS中调整梯形大小

来自分类Dev

调整浏览器大小时,如何将每个元素固定在同一位置?

来自分类Dev

调整浏览器大小时CSS容器未调整

来自分类Dev

调整浏览器大小时css容器未调整

来自分类Dev

当浏览器调整大小时,将元素保留在父视图中

来自分类Dev

砌体未在浏览器调整大小时重新加载元素

来自分类Dev

css {right:0; 位置:绝对;}浏览器调整大小时,元素不应移位

来自分类Dev

CSS样式-调整浏览器窗口大小时,元素会移到中心

来自分类Dev

当我调整浏览器大小时,所有元素都会更改其位置

来自分类Dev

HTML,在调整浏览器大小时阻止页面上的元素移动

来自分类Dev

调整浏览器窗口大小时,块元素变大并且不会垂直居中

来自分类Dev

调整浏览器大小时对齐Flexbox部分

来自分类Dev

调整浏览器大小时CSS边框影响宽度

来自分类Dev

调整浏览器大小时的bootstrap scrollspy错误

Related 相关文章

  1. 1

    调整浏览器窗口大小时,li元素重叠

  2. 2

    调整浏览器窗口大小时如何防止div元素下降?

  3. 3

    调整浏览器大小时如何防止HTML元素移动?

  4. 4

    调整浏览器大小时如何防止HTML元素移动?

  5. 5

    调整浏览器大小时,如何使元素移动更快?

  6. 6

    调整浏览器大小时内容重叠

  7. 7

    当我调整浏览器大小时,元素与图像重叠

  8. 8

    调整浏览器大小时如何停止调整元素大小

  9. 9

    元素总是在调整浏览器大小时移动

  10. 10

    调整浏览器大小时,如何包装菜单?

  11. 11

    如何防止浏览器高度调整大小影响元素的位置

  12. 12

    调整浏览器大小时,为什么我的div重叠?

  13. 13

    重新调整浏览器大小时,我有2个div重叠

  14. 14

    调整浏览器大小时引导导航栏链接重叠

  15. 15

    调整浏览器窗口大小时,如何正确调整textarea的大小?

  16. 16

    浏览器窗口调整大小时如何在CSS中调整梯形大小

  17. 17

    调整浏览器大小时,如何将每个元素固定在同一位置?

  18. 18

    调整浏览器大小时CSS容器未调整

  19. 19

    调整浏览器大小时css容器未调整

  20. 20

    当浏览器调整大小时,将元素保留在父视图中

  21. 21

    砌体未在浏览器调整大小时重新加载元素

  22. 22

    css {right:0; 位置:绝对;}浏览器调整大小时,元素不应移位

  23. 23

    CSS样式-调整浏览器窗口大小时,元素会移到中心

  24. 24

    当我调整浏览器大小时,所有元素都会更改其位置

  25. 25

    HTML,在调整浏览器大小时阻止页面上的元素移动

  26. 26

    调整浏览器窗口大小时,块元素变大并且不会垂直居中

  27. 27

    调整浏览器大小时对齐Flexbox部分

  28. 28

    调整浏览器大小时CSS边框影响宽度

  29. 29

    调整浏览器大小时的bootstrap scrollspy错误

热门标签

归档