1.直接上效果图:
不同浏览器兼容不同,效果有差异。
2.源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>透明登录界面</title>
<style type="text/css">
body {
width: 800px;
height: 520px;
background-image: url("img/back.jpg");;
background-repeat: no-repeat;
}
#login_frame {
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 40%;
right: 50%;
top: 60%;
margin-bottom: 50%;
margin-left: -100px;
margin-top: -200px;
background-color: rgba(240, 255, 255, 0.25);
border-radius: 10px;
text-align: center;
}
.text_class {
width: 280px;
height: 26px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 0;
}
#btn_login {
font-size: 14px;
font-family: 宋体;
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;
float: 160px;
}
#btn_regis {
font-size: 14px;
font-family: 宋体;
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;
float: 160px;
#forget_pwd:hover {
color: blue;
text-decoration: underline;
}
#login_control {
padding: 0 28px;
}
</style>
</head>
<body>
<div id ="login_frame">
<from method ="post" action="login.js">
<div>
<p>账号 <input type="text" id="username" placeholder="请输入用户名" class="text_class"></lable></p>
</div>
<div
<p>密码 <input type="text" id="password" placeholder="请输入密码" class="text_class"></lable></p>
</div>
<div id="login_control">
<input type="button" id="btn_login" value="登录" οnclick="login();"/>
<input type="button" id="btn_regis" value="注册" οnclick="login();"/>
</div>
</div>
</from>
</div>
</body>
</html>
希望对你有帮助!