Question

我目前正在开发一个网站项目，但我在开发它时遇到了一些问题。基本上，现在我正在尝试创建一个登录页面。我在网络上遇到了一个很常见的错误，这使得一切都很丑陋在调整浏览器大小时移动。

/* Bordered form */
form {

     margin-left: 220px;
     margin-right: 220px;
     background-position: top center;

}

body{
    background-image: url("/images/background.jpeg");
    background-position: top center;
    min-width:450px;
    max-width:960px; 


}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-position : top center;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Center the avatar image inside this container */
.imgcontainer {
    padding-top: 60px;
    position: relative;
    left: 17%;
    top: 200%;
    width: 150%;
    text-align: center;
    font-size: 18px;
}


/* Avatar image */
img.avatar {
    text-align: center;
    width: 40%;
    border-radius: 50%;
      display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Add padding to containers */
.container {
    padding: 20px;
    margin-left: 232px;
    margin-right: 200px;   
     min-width:450px;
  max-width:960px; 
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id = form >
<form action="action_page.php">
<div class="imgcontainer">
    <img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
    <span class="psw"><a href="#">Forgotten password?</a></span>
  </div>
</form>
</div>
</body>

我发布的代码是我现在写的代码。我觉得这个问题真的很小而且很愚蠢，但我只是看不到它。我知道有很多类似这个的主题，但是我花了两个小时浏览了一个答案我没有找到任何有用的东西。希望你可以帮助我:)）

Answer 1

你应该编写回应编码

示例

＆＃13;
＆＃13;
/* Bordered form */ form { max-width: 500px; background-position: top center; margin: 0 auto; } body { background-image: url("/images/background.jpeg"); background-position: top center; } /* Full-width inputs */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; background-position: top center; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } /* Center the avatar image inside this container */ /* Avatar image */ img.avatar { text-align: center; width: 40%; border-radius: 50%; display: block; margin-left: auto; margin-right: auto; } /* Add padding to containers */ /* The "Forgot password" text */ span.psw { float: right; padding-top: 16px; }
＆＃13;
<!DOCTYPE HTML> <head> <link rel="stylesheet" type="text/css" href="login.css" media="screen" /> <title>Admin Panel</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <div class="container"> <div class="row"> <form action="action_page.php"> <div class="imgcontainer"> <img src="/images/treasure.jpeg" alt="Avatar" class="avatar"> </div> <div class="form"> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me <span class="psw"><a href="#">Forgotten password?</a></span> </div> </form> </div> </div> </body>
＆＃13;
＆＃13;
＆＃13;

Answer 2

除了cnsvnc提供的答案。

除了使用％值等响应式工具而不是固定的px大小等。您可能还想查看媒体查询。

媒体查询允许您根据视口大小应用特定样式。您可以在此处了解详情：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

媒体查询示例：

@media only screen and (max-width: 500px) {
 // your styles here
}

此外，我还举了一个简单的例子来证明。尝试调整此小提琴中的浏览器大小，看看新样式是否已应用。

https://jsfiddle.net/kfy3jj1q/

Answer 3

您可以查看引导程序的网格布局。它是最容易和最广泛使用的平台，可以帮助您避免代码的跨浏览器测试以及覆盖所有不同的屏幕。这是引导网格系统的链接：

http://getbootstrap.com/css/#grid（尝试在示例中调整浏览器的大小）。

你只需要使用合并他们的css和js文件，你就可以了。

CSS＆amp; HTML移动元素

3 个答案: