登录  /  注册
哪位大神帮翻译下啊?
phpcn_u211
phpcn_u211 2016-12-14 18:15:36
[PHP讨论组]
phpcn_u211
phpcn_u211

全部回复(3)
小水滴

首先我们先看这段代码

 <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>
 密&#12288码:<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>

如果你想知道每段代码的解释,那你还是算了吧

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号