- 注重版权,转载请注明原作者和原文链接
- 作者:Bald programmer
先看看效果图
login.html代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<style>
body{
background: url(img/bg.jpg) top left;
background-size: 100%;
}
</style>
<body>
<div id="div-title">
<h3>欢迎登陆</h3>
</div>
<div id="form-border">
<form method="post">
<div id="img-control">
<img src="img/01.png" id="login-img"/>
</div>
<label class="form-label" for="account">账 号</label>
<input id="account" class="form-input" type="text" placeholder="账号" required="required"/><br>
<label class="form-label" for="password">密 码</label>
<input id="password" class="form-input" type="password" placeholder="密码" required="required"/><br>
<label id="register" class="form-label" for="password">没有账号?<a href="register.html">点击注册</a></label><br>
<input id="login" class="form-button" type="submit" value="登陆"/>
</form>
</div>
</body>
</html>
register.html代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<style>
body{
background: url(img/bg.jpg) top left;
background-size: 100%;
}
</style>
<body>
<div id="div-title">
<h3>欢迎注册</h3>
</div>
<div id="form-border">
<form method="post">
<div id="img-control">
<img src="img/01.png" id="register-img"/>
</div>
<label class="form-label" for="account">账 号</label>
<input id="account" class="form-input" type="text" placeholder="账号" required="required"/><br>
<label class="form-label" for="password">密 码</label>
<input id="password" class="form-input" type="password" placeholder="密码" required="required"/><br>
<label id="register" class="form-label" for="password">已有账号?<a href="login.html">点击登陆</a></label><br>
<input id="login" class="form-button" type="submit" value="注册"/>
</form>
</div>
</body>
</html>
style.css代码
img {
width: 150px;
height: 150px;
}
#login-img{
margin-left: 30px;
float: left;
}
#register-img{
float: right;
margin-right: 35px;
}
#img-control {
margin-top: 65px;
}
#form-border {
background-color: rgba(188, 176, 212, 0.6);
width: 500px;
height: 300px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.form-input {
width: 200px;
height: 25px;
padding-left: 5px;
border-radius: 5px;
}
.form-label {
margin-left: 30px;
}
.form-button {
width: 70px;
height: 30px;
margin-top: 10px;
margin-left: 70px;
font-size: 18px;
font-family: "宋体";
}
#div-title {
text-align: center;
margin-top: 150px;
}
h3 {
font-size: 40px;
font-family: "华文彩云";
}
#password {
margin-top: 20px;
margin-bottom: 10px;
}
#register {
margin-left: 70px;
}
背景图片
更多推荐
用html+css制作简单好看的登陆注册界面
发布评论