HTML好看的登录注册界面
界面一：
代码如下：
<div class="demo form-bg">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
<form class="form-horizontal">
<div class="heading">注册页面</div>
<div class="form-group">
<i class="fa fa-user"></i><input required name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1">
</div>
<div class="form-group">
<i class="fa fa-lock"></i><input required name="login[password]" type="password" class="form-control" placeholder="Password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default"><i class="fa fa-arrow-right"></i></button>
<span><a href="" class="create_account">注册</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
界面二
代码如下：
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
<span class="login100-form-title-1">登 录</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
<span class="label-input100">用户名</span>
<input class="input100" type="text" name="username" placeholder="请输入用户名">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
<span class="label-input100">密码</span>
<input class="input100" type="password" name="pass" placeholder="请输入用户名">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30">
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">记住我</label>
</div>
<div>
<a href="javascript:" class="txt1">忘记密码？</a>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">登 录</button>
</div>
</form>
</div>
</div>
</div>
界面三
代码如下：
<div class="dowebok">
<div class="logo"></div>
<div class="form-item">
<input id="username" type="text" autocomplete="off" placeholder="邮箱">
<p class="tip">请输入合法的邮箱地址</p>
</div>
<div class="form-item">
<input id="password" type="password" autocomplete="off" placeholder="登录密码">
<p class="tip">邮箱或密码不正确</p>
</div>
<div class="form-item"><button id="submit">登 录</button></div>
<div class="reg-bar">
<a class="reg" href="#" target="_blank">立即注册</a>
<a class="forget" href="#" target="_blank">忘记密码</a>
</div>
</div>
界面四
代码如下：
<div class="dowebok">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-pic js-tilt" data-tilt>
<img src="data:images/img-01.png" alt="IMG">
</div>
<form class="login100-form validate-form">
<span class="login100-form-title">
会员登陆
</span>
<div class="wrap-input100 validate-input">
<input class="input100" type="text" name="email" placeholder="邮箱">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input">
<input class="input100" type="password" name="pass" placeholder="密码">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
登陆
</button>
</div>
<div class="text-center p-t-12">
<a class="txt2" href="javascript:">
忘记密码？
</a>
</div>
<div class="text-center p-t-136">
<a class="txt2" href="#" >
还没有账号？立即注册
<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
</a>
</div>
</form>
</div>
</div>
</div>
HTML好看的登录注册界面相关推荐
- HTML 实现好看的登录注册界面（一)
1. 效果图展示 2. 代码 2.1 HTML部分 <!DOCTYPE html> <html lang="en"><head><meta ...
- HTML实现好看的登录注册页面
成品展示 其它 HTML 实现好看的登录注册界面(一) HTML实现好看而简洁的登录页面 HTML 实现一个简单而精美的登录界面 代码 html+js <body><div clas ...
- AndroidStudio实现用户登录注册界面代码（一）
首先使用Android Studio的布局文件xml实现界面设计 第一步:新建工程项目MyAPP 选择Empty Activity 点击"下一步" 1.在res/layout/ac ...
- php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面 首先你要搭建一个自己的数据库 我用wamp64创了一个people的数据库 具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
- 右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
- Android开发：登录/注册界面的编写
目录 新建一个空项目(或Activity) 在xml中绘制登录界面 关掉ActionBar 运行(最终效果图) 后记 在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...
- 【Vue作业]---Vue登录注册界面
1.引言 你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
- python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
- python做一个登录注册界面_python做一个登录注册界面的方法
python做一个登录注册界面的方法 发布时间:2020-08-21 10:37:05 来源:亿速云 阅读:111 作者:小新 这篇文章主要介绍python做一个登录注册界面的方法,文中介绍的非常详细 ...
最新文章
- 如何创建企业微信应用
- 错误笔记（1）——关于克隆虚拟机引发的后续问题
- 阅读作业：大泥球、敏捷、人件
- 网络调试指令ping、telnet、curl
- CSS预处理——LESS
- svd medium_我们刚刚放弃了Medium博客。 您可能也应该这样做。
- python实现采样函数_python中resample函数实现重采样和降采样代码
- BZOJ 2728 HNOI2012 与非 高斯消元
- curl get请求传递参数_curl 命令
- 写在2013年最后一天
- chrome frame节点 取_Chrome Frame插件解决IE浏览器兼容问题
- 致远项目管理SPM系统案例：中天金融集团股份有限公司项目管理
- 如何把图片上的文字提取出来并转成Word文档
- 【深度学习 理论】Brief Introduction of Deep Learning
- oracle按格式展示数据,ORACLE按格式导出数据到文本
- [经典之作]vml经典之作
- vivoX30是android5的吗,深度剖析揭秘opporeno5质量和vivox30区别是？选哪个更好？独家揭秘报道...
- Java并发包：ScheduledExecutorService
- 百度云加速边缘计算功能设置判断移动端跳转
- dedecms模板教程：织梦模板网站SEO优化教程