小水滴2016-12-19 11:15:31
首先我们先看这段代码
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("请输入用户名");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("请输入密码");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("请输入验证码");
myform.yzm.focus();
return false;
}
}
</script>这段代码是使用我们的JS来判断用户的登录的，如果我们的用户没有输入用户名或密码或验证码就登录的话，就会弹出提示框对用户进行提醒
下面的这段代码就是对我们登录页面所做的CSS样式，具体的css样式可以参考css样式课程
<style type="text/css">
body{background-image: url("/images/1.jpg")} //给背景图片
.container{
width: 380px;
height: 330px;
margin: 0 auto;
margin-top: 240px;
box-shadow: 0 0 20px #222; //设置一个阴影
border-radius:40px; //设置div的圆角
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative; //将class="right"的div进行绝对定位
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
button{ //设置button按钮的样式
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>至于在下面的代码，就是的登录表单页面，加上我们上面的css样式，就可以把我们的登录页面做的很美观了
<form action="login.php" method="post" onsubmit="return foo();" name="myform" > <div class="container"style="font-size:17px"> <div class="right"> <h2>用户登陆</h2> <p> 用户名:<input type="text" name="username" id="name" placeholder="请输入用户名"> </p> <p> 密　码:<input type="password" name="password" id="pwd" placeholder="请输入密码" > </p> <p> 验证码:<input type="text" name="yzm" id="yzm" placeholder="请输入验证码"> <img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"> </p> <p style=" margin-left: 200px"><a href="reg.html">注册</a></p> <p> <button class="button">立即登陆</button> </p> </div> </div> </form>
如果你想知道每段代码的解释，那你还是算了吧