前端之登录注册页面案例

一、效果图

（1）登录界面

（2）注册界面

二、详细设计

（1）登录界面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录界面</title><style>html,body{height: 100%;}body{background: #006666;}h1{color: #FFF;text-align: center;}.container{margin: 100px auto;width: 30%;}form{background: #FFF;height: 300px;width: 100%;border-radius: 10px;position: relative;}label{color: #000;font-weight: bold;font-size: 20px;margin-left: 40px;}input{text-align: left;margin: 10px;}.input{width: 80%;height: 35px;margin-left: 40px;}.checkbox{margin-left: 30px;}a{text-decoration: none;font-weight: bold;}.submit{display: inline-block;margin-top: 0;margin-left:145px;background: #000;border: none;color: #FFF;height: 35px;width: 100px;text-align: center;font-weight: bold;border-radius: 5px;}.left{margin: 20px;}.right{position: absolute;right: 20px;}</style>
</head><body><div class="container"><h1>用户登录</h1><form><br><label for="username">用户名</label><br><input type="text" name="username" id="username" class="input" value="" placeholder="用户名admin"><br><label for="pwd">密码</label><br><input type="password" name="" id="pwd" class="input" value="" placeholder="密码admin"><div class="checkbox"><input type="checkbox" name=""><span>记住密码</span></div><button type="submit" class="submit" onclick="submits(this)">开始登录</button><br><a href="index.html" class="left">返回首页</a><a href="register.html" class="right">注册账号</a></form></div><script>function submits(btn){var userName = document.getElementById("username").value;var pwd = document.getElementById("pwd").value;console.log(userName)if (userName == "admin" && pwd == "admin") {alert("用户名和密码正确，但是连接服务器失败！")}else {alert("用户名或密码不正确！");}};</script>
</body></html>

（2）注册界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册界面</title><style>body{background: #159f9f;}.container{margin: 0 auto;width: 500px;}form{width: 450px;margin: 0 auto;background: #FFF;border-radius: 15px;position: relative;}h1{font-size: 28px;text-align: center;color: #FFF;}.p{color: red;margin-left: 33px;display: inline-block;//不占单独一行的块级元素}label{font-size: 18px;font-weight: bold;}.register{height: 35px;width: 300px;}.q{color:red;margin-left:17px;display:inline-block;}.checkbox{margin-left: 100px;display: inline-block;width: 15px;height: 15px;}.submit{border-radius: 7px;margin-left: 150px;height: 35px;width: 150px;background-color: #000;border: none;display: block;padding: 0;color: #FFF;font-weight: bold;cursor: pointer;}a{text-decoration: none;font-weight: bold;}.left,.right{position: absolute;bottom: 20px;}.left{left: 20px;}.right{right: 20px;}</style>
</head>
<body><div class="container"><h1>新用户注册</h1><form><br><span class="p">*</span><label for="username">用户名</label><input type="text" name="" id="username" placeholder="" class="register"><br><br><span class="p">*</span><label for="phonenumber">手机号</label><input type="text" name="" id="phonenumber" class="register"><br><br><span class="q">*</span><label for="pwd">登录密码</label><input type="password" name="" id="pwd" class="register"><br><br><span class="q">*</span><label for="c_pwd">确认密码</label><input type="password" name="" id="c_pwd" class="register"><br><br><span class="p">*</span><label for="verify">验证码</label><input type="text" id="verify" class="register" name=""><br><br><input type="checkbox" class="checkbox" name=""><span style="font-size:15px">我已阅读并同意《用户注册协议》</span><br><br><input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br><a href="index.html" class="left">返回首页</a><a href="login.html" class="right">开始登录</a></form></div><script>var checkbox=document.getElementsByClassName('checkbox');function register(btn){if(checkbox[0].checked==true){alert("注册成功！");}else{alert("请先阅读并同意《用户注册协议》！")}}</script>
</body>
</html>

三、部分效果

（1）登录界面

（2）注册界面

前端之登录注册页面案例相关推荐

UI设计灵感|App的登录注册页面案例参考
良好的交互细节是每一个优秀 App 的共同品质,而多数 App 被用户抛弃就是因为登录注册页面的问题,只有从用户场景和视角来思考产品,便能设计出打动人心的 App. 集设网www.ijishe.com ...
html+css登录注册页面案例
一.展示效果 1. 登陆页面展示(背景图片来自网络可以自己更换): 2. 注册页面展示: 二.需要添加的normalize.css跟common.css 代码如下(normalize.css重置样式表 ...
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...

前端之登录注册页面案例

前端之登录注册页面案例相关推荐

最新文章

热门文章