使用HTML、CSS、JavaScript实现登录的简单静态界面,登录注册等功能还未实现。
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LYW</title>
<!--CSS代码块-->
<style type="text/css">
/*dl_main块总体布局*/
#dl_main{
position: absolute;
left:30%;
top: 40%;
width: 40%;
height:450px;
margin-top:-200;/*底部空白*/
text-align-last: center;/*所有内容居中*/
background-color: #9A9A9A;/*背景颜色*/
/*背景颜色设置透明效果,两种方式支持的浏览器不同*/
filter: opacity(70);
opacity: 0.7;
}
/*dl_main中账号*/
#account{
color: #000000;
text-align: center;
font-size: 30px;
border-radius: 25px;/*边框弧度*/
}
/*dl_main中密码*/
#password{
color: #000000;
text-align: center;
font-size: 30px;
border-radius: 25px;/*边框弧度*/
}
/*dl_main中注册*/
#zhuce{
font-size: 17px;
}
/*dl_main中记住密码*/
#remPassword{
font-size: 17px;
}
/*dl_main中忘记密码*/
#forget{
font-size: 17px;
}
/*dl_main中登录*/
#denglu{
background-color: #605993;
color: #FFFFFF;
height:50px;
width:300px;
padding:5px 10px;/*上下填充10 左右5*/
font-size: 20px;
border:0;/*边框宽度*/
border-radius:10px;/*边框弧度*/
}
/*改变超链接的颜色*/
a{
color: #000000;
}
</style>
<!--JavaScript代码块-->
<script type="text/javascript">
function f_login(){
account = window.document.loginForm.account.value;
password = window.document.loginForm.password.value;
if(account==""){
alert("账号不能为空");
document.loginForm.account.focus();//聚焦
return;
}
else if(password==""){
alert("密码不能为空");
document.loginForm.password.focus();//聚焦
return;
}
document.loginForm.submit();
}
</script>
</head>
<body background="星.jpg" style="background-repeat: no-repeat;background-size: cover;background-attachment: fixed">
<div id="dl_main">
<h1 style="color:#000000;font-size: 60px;font-family: '华文楷体'">Login</h1><br>
<!--表单(包括账号、密码、注册、记住密码、忘记密码、登录)-->
<form name="loginForm">
<input type="text" name="account" id="account" placeholder="请输入账号"><br><br>
<input type="password" name="password" id="password" placeholder="请输入密码"><br>
<a href="register.html" style="text-decoration:none" name="zhuce" id="zhuce">注册账号</a>
<input type="checkbox" name="remPassword" id="remPassword"><label for="remPassword">记住密码</label>
<a href="forget.html" style="text-decoration:none" name="forget" id="forget">忘记密码</a>
<br><br>
<input type="button" name="denglu" id="denglu" value="登 录" onClick="f_login()">
</form>
</div>
</body>
</html>
用到图片星.jpg
界面如下: