清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码

今天给大家分享一款基于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、总结:这两个页面很相似，涉及到的元素都差不多，不同的只是对页面的布局，很多地方的布局都可以进行修改得到你最满意的页面效果，也有很多元素的属性可以进一步设置，比如限制用户名和 密码的长度，加入背景图片等等，都非常简单，只要修改上面相应的一行代码即可 ，今天的分享就是这样啦~~

相关文章