APP登录界面(网页仿制版)

这是一个千牛登录界面
与原版不同的是，这是我们用web仿制的

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.login{border: 1px solid #E0E0E0;position: absolute;top: 200px;left: 30%;width: 390px;height: 310px;display: none;}.user input{display: block;margin: 20px auto;width: 200px;height: 25px;font-size: 14px;text-indent: 32px;border-radius: 30px;border: 1px solid #BABABA;outline: none;}.user{position: absolute;top: 130px;left: 90px;}.icon-user{display: block;position: absolute;border-radius: 50px;top: 21px;left: 5px;width: 25px;height: 25px;overflow: hidden;}.icon-user img{position: absolute;top: -14px;left: -12px;}.icon-pwd{display: block;position: absolute;border-radius: 50px;top: 70px;left: 5px;width: 25px;height: 25px;overflow: hidden;}.icon-pwd img{position: absolute;top: -55px;left: -13px;}.min{position: absolute;top: 5px;right: 35px;width: 20px;height: 20px;z-index: 110;}.close-login{position: absolute;top: 5px;right: 7px;width: 20px;height: 20px;z-index: 110;}.min-div{position: absolute;bottom: 1px;width: 100px;height: 30px;background-color: #0894EC;color: #FFFFFF;text-align: center;line-height: 30px;display: none;}.min:hover{cursor: pointer;border: 1px solid #FFFFFF;}.close-login:hover{cursor: pointer;border: 1px solid #FFFFFF;}.min-div:hover{cursor: pointer;opacity: 0.8;}#move{position: absolute;top: 0;left: 0;width: 100%;height: 100px;z-index: 100;}#move:hover{cursor: move;}.user button{width: 200px;height: 30px;display: block;margin: 0px auto;border: 1px solid #0894EC;background-color: #0894EC;color: #FFFFFF;border-radius: 50px;}.user button:hover{cursor: pointer;}</style><script type="text/javascript" src="js/a.js" ></script><script>//显示登录窗口function loginShow(o){document.getElementById("move_div").style.display = "block";document.getElementById("btn").style.display = "none";}//用户框获取焦点function userFocus(){var user = document.getElementById("userName");user.style.borderColor = "#0894EC";}//用户框失去焦点function userBlur(){var user = document.getElementById("userName");user.style.borderColor = "#BABABA";}//密码框获取焦点function myFocus(){var backimg = document.getElementById("backimg");var pwd = document.getElementById("password");backimg.src = "img/pwd-input.jpg";pwd.style.borderColor = "#0894EC";}//密码框失去焦点function myBlur(){var backimg = document.getElementById("backimg");var pwd = document.getElementById("password");backimg.src = "img/user-input.jpg";pwd.style.borderColor = "#BABABA";}//最小化function min(){document.getElementById("move_div").style.display = "none";document.getElementById("min-div").style.display = "block";}//最大化function max(){document.getElementById("move_div").style.display = "block";document.getElementById("min-div").style.display = "none";}//关闭窗口function closeLogin(){document.getElementById("move_div").style.display = "none";document.getElementById("btn").style.display = "block";}</script></head><body><button id="btn" onclick="loginShow()">登录</button><div id="move_div" class="login"><img id="backimg" src="img/user-input.jpg" /><!--拖拽区域--><div id="move" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div><!--最小化--><div id="min" class="min" onclick="min()"></div><!--关闭--><div id="close-login" class="close-login" onclick="closeLogin()"></div><!--用户输入--><div class="user"><span class="icon-user"><img src="img/login-ioc.jpg" /></span><span class="icon-pwd"><img src="img/login-ioc.jpg" /></span><input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()"/><input id="password" type="password" onfocus="myFocus()" onblur="myBlur()" /><button>登录</button></div></div><!--最小化后显示区域--><div id="min-div" class="min-div" onclick="max()">+用户登录</div></body>
</html>

其中插入的图片为原版登录界面的截图，注意p去原有的登录设置图即可

APP登录界面(网页仿制版)相关推荐

怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面发布时间:2020-12-02 17:09:10 来源:亿速云阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...
Android studio设计app登录界面
Android studio设计app登录界面 UI界面设计在设计登录界面时,可以使用不同布局方式来实现该功能,通常情况下使用的是LinearLayout(线性布局)和TableLayout(表格布 ...
html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
html后台登录界面网页设计界面
一款简单的html后台登录界面网页设计界面带给大家. 效果图: html代码: <!DOCTYPE html> <html> <head><title> ...
Android跳转至抖音APP个人界面(包括极速版，火山版)
系列文章目录 Android跳转至抖音APP个人界面(包括极速版,火山版) 文章目录系列文章目录前言一.实现思路二.判断APP是否存在于Android手机三.进行跳转至抖音个人界面举例实现 ...
浅析网站 APP 登录界面设计
无论网页或是移动APP的设计,很重要的一点是如何能在小而美和功能复杂性之间找到平衡点.本文就移动APP表单设计进行浅析,看设计师是如何在设计与交互体验之间做到小而美的平衡. 一.极致的减法这是一个异 ...
app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
Android APP登录界面设计
为平板设计的登录界面,可以实现的功能有登录,忘记密码,记住密码,用户注册.(只设计界面,为了练习界面布局) 其中包括了EditText.TextView.CheckBox.Button控件. < ...

APP登录界面(网页仿制版)

APP登录界面(网页仿制版)相关推荐

最新文章

热门文章