成品展示

其它

HTML 实现好看的登录注册界面（一)
HTML实现好看而简洁的登录页面
HTML 实现一个简单而精美的登录界面

代码

html+js

<body><div class="container"><div class="main_left active"><h2>登录</h2><form action="#" class="form_login"><input type="text" placeholder="邮箱 / 账号 /手机号"><input type="password" name="" id="" placeholder="请输入密码"><p><a href="#" class="forget_pwd">忘记密码？</a></p><button class="btn_login">登录</button></form><div class="other"><a href="#"><img src="./QQ.png" alt="" width="40" height="40"></a><a href="#"><img src="./微信.png" alt="" width="38" height="38"></a></div></div><div class="way"><div class="change_way"><button class="click" onclick="dclick(this)">注册</button></div></div><div class="main_right active"><h2>注册</h2><form action="#" class="form_register"><input type="text" placeholder="请输入邮箱"><input type="password" name="" id="" placeholder="请输入密码"><input type="password" name="" id="" placeholder="确认密码"><button class="btn_register">注册</button></form></div></div><script>var middlePart = document.getElementsByClassName('way')[0];var firstPart = document.getElementsByClassName('main_left')[0];var finalPart = document.getElementsByClassName('main_right')[0];function dclick(e) {if (e.textContent == "注册") {middlePart.classList.add('pull');firstPart.classList.add('hid');finalPart.classList.add('dis');e.textContent = "登录";} else {e.textContent = "注册";middlePart.classList.remove('pull');firstPart.classList.remove('hid');finalPart.classList.remove('dis');}}</script>
</body>

css

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background: url(./backgrond.jpg) no-repeat;background-size: cover;height: 100vh;
}.container {position: relative;border-radius: 14px;width: 760px;height: 420px;top: 50%;left: 50%;transform: translate(-50%, -50%);box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}.main_left,
.main_right,
.way {width: 380px;height: 420px;padding: 50px 30px;position: absolute;text-align: center;
}h2,
label {letter-spacing: 20px;text-indent: 20px;
}form {padding-top: 25px;
}input[type="text"],
input[type="password"] {display: inline-block;height: 40px;width: 100%;padding: 7px 8px;margin-bottom: 25px;font-size: 16px;
}button {margin-top: 25px;width: 160px;height: 40px;letter-spacing: 16px;text-indent: 16px;border-radius: 16px;border: 0;color: #fff;font-size: 16px;background: linear-gradient(to right, #5d9960, #0b5e2e);cursor: pointer;
}a {text-decoration: none;color: darkcyan;
}.active {background-color: #E9E9E9;border-radius: 14px;
}.main_left {transition: all 0.6s ease-in-out;
}.other {margin-top: 25px;text-align: center;
}.other a:first-child {margin-left: 0;
}.other a {margin-left: 35px;
}.way {position: absolute;left: 50%;transition: all 0.6s ease-in-out;
}.change_way {margin: 115px 80px 140px;position: relative;white-space: nowrap;border-radius: 14px;
}.main_right {left: 50%;display: none;
}.btn_register {margin-bottom: 10px;
}.pull {left: 0;
}.dis {display: block;
}.hid {display: none;
}

新手css实战项目，如有不足之处，请多包涵

HTML实现好看的登录注册页面相关推荐

用css制作好看的登录注册页面
在这里插入代码片<!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...
登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...

HTML实现好看的登录注册页面

成品展示

其它

代码

html+js

css

新手css实战项目，如有不足之处，请多包涵

HTML实现好看的登录注册页面相关推荐

最新文章

热门文章