我花了最后一周学习如何通过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] 删除。
我来说两句