黄良钵博客

程序开发 一个假的App登录页面

这是个不能打账号密码的页面，一个假的登录界面 html部分代码： <img src="bg.jpg" alt="背景图片"> <main> <header> <span id="goGack">返回</span> 登录 <span id="register">注册</span> </header> <section id="img"></section> <section id="acount"> 账号　2345678@qq.com </section> <section id="password"> 密码　<span>●●●●●●●●</span> </section> <section id="login">登　录</section> <section id="forget">忘记密码？</section> <section id="login3"> <img src="weibo.png" alt=""> <img src="qq.png" alt=""> <img src="weixin.png" alt=""> </section> </main> css部分代码： *{ box-sizing: border-box; } body{ margin: 0; height: 100%; background-color: #333; overflow: hidden; color: #ddd; text-align: center; } body>img{ position: absolute; top: -20px; left: -200px; height: 100%; /*滤镜*/ filter: blur(20px); opacity: 0.9; } main{ width: 100%; position: absolute; top: 0; left: 0; } header{ font-size: 1.1rem; line-height: 3rem; position: relative; } header span{ font-size: 0.9rem; } #goGack{ position: absolute; left: 0.8rem; top: 0.01rem; } #register{ position: absolute; right: 0.8rem; top: 0.01rem; } #img{ /*vw viewpoint width 视窗宽度 1vw等于视窗宽度的1% vh viewpoint height 视窗高度 1vh等于视窗高度的1%*/ width: 32vw; height: 32vw; background-image: url(img.jpg); background-size: 120% 120%; background-position: 50% 50%; border-radius: 50%; max-width: 14rem; max-height: 14rem; margin: 8vh auto; } #acount, #password{ width: 70vw; height: 3rem; margin: 0 auto; text-align: left; border-bottom: 1px solid