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