今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码，使用浅色设计，兼容移动设备，加入了基本的表单验证，适合大部分网站。
代码很简单有css样式，index.html两部分代码。感兴趣的朋友可以查看效果演示，也可以下载源码,此段代码适用于任何浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效源码！
首先是登录界面，我命名为login.html(这在代码的跳转中有作用)，有几个我认为比较重要的地方我直接用//来注释了，但是小伙伴复制粘贴的时候需要把注释去掉，因为HTML注释语法不是这样的：
form
{
width:100%;
height:700px;
margin-top: 0px;
background:#008B8B;
}
div
{
display:inline-block;
padding-top: 80px;
padding-right: 20px;
}
h2
{
font-family: "微软雅黑";
font-size: 40px;
color:black;
}
#log
{
color:blue;
}
Hedy西点店欢迎您！
用户名:
密 码: //注意：&emsp是全角空格符，占一个中文字的长度，加上可以保证用户名和密码对齐，小伙伴可以试着 先不加这个运行一下看一下结果
还没有账号？立即注册
然后是注册页面，我把它命名为register.html
form
{
width:100%;
height:700px;
margin-top: 0px;
background:#008B8B;
}
div
{
display:inline-block;
padding-top: 40px;
padding-left: 0px;
}
h2
{
font-family: "微软雅黑";
font-size: 40px;
color:black;
}
#reg
{
color:blue;
}
注册
用户名:
密 码:
手机号:
已有账号？请登录
3、总结:这两个页面很相似，涉及到的元素都差不多，不同的只是对页面的布局，很多地方的布局都可以进行修改得到你最满意的页面效果，也有很多元素的属性可以进一步设置，比如限制用户名和 密码的长度，加入背景图片等等，都非常简单，只要修改上面相应的一行代码即可 ，今天的分享就是这样啦~~
相关文章
如果觉得《清爽登录界面html 基于css3实现扁平简洁清爽的登录注册页面代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
