上周我学习了如何通过 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>最佳答案
我为您创建了一个简单的解决方案。我没有设计太多样式，但你应该可以自己完成。
/**
* 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 引导框架，因为我认为这是初学者创建响应式移动优先设计的最快方式。你可以访问他们的website了解更多信息。
我使用 jQuery for javascript，虽然我用得不多。
为了让您的代码保持干净、可读和井井有条，您应该将 html、css 和 javascript 分开。如果您有任何问题，请随时提出。
关于html - 如何在调整浏览器大小时防止 UI 元素相互重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35620484/