漂亮的登录界面
2015-07-20 18:40
531 查看
等女票下班,做了个登陆界面,背景图片是win7自带的;磨砂处理用PS做的,具体是:打开图片→过滤→模糊→高斯模糊,然后数值看个人喜欢,我设了个9。下面是完成后的结果;
下面是代码
源码下载地址: http://download.csdn.net/detail/lianruanjian/8918463
下面是代码
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login</title> <style> body{ overflow:hidden; background:url(img/Desert.jpg) no-repeat top center ; background-size:cover; text-align:center; } #login_div{ margin:120px auto; width:380px; height:300px; background: rgba(255,255,255,0.2); border-radius:8px; box-shadow:0 0 5px #000; text-align:center; font-family: "幼圆"; color:#fff; text-shadow:0 0 2px #000; } .login_input{ width:200px; height:30px; font-size:15px; border:0; } #login_div>h2{ top:30px;position:relative;color:#fff; } #login{ width:200px; height:30px; border-radius:5px; color:#fff; background:#ff5050; border:0; padding:0; cursor:pointer; } #remember{ width:200px; height:30px; border:0; margin:auto; font-size:12px; padding:0; } #remember p{ margin-top:5px; border:0; padding:0; line-height:20px; height:20px; width:100px; float:left; text-shadow:0 0 1px #333; position:relative; text-align:left; cursor:pointer; } #login_div a{ text-shadow:0 0 2px #000; font-size:12px; width:50px; height:30px; position:relative; margin-left:310px; margin-top:70px; display:block; text-decoration:underline; cursor:pointer; } </style> </head> <body> <div id="login_div"> <h2>登录</h2> <input class="login_input" type="text" style="margin-top:30px; border-top-left-radius:5px;border-top-right-radius:5px;"/><br/> <input class="login_input" type="password" style="margin-top:0; border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:1px solid #ccc"/><br/> <div id="remember"> <p><input type="checkbox" style="vertical-align:-3px;"/>记住密码</p> <p style="left:0;text-align:right">忘记密码?</p> </div> <input id="login" type="button" value="登录"/> <a>注册账号</a> </div> </body> </html>
源码下载地址: http://download.csdn.net/detail/lianruanjian/8918463
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签
- 不同版本IE使用不同css(css条件注释语句用法)