易墨发表于一个爱瞎折腾的程序猿订阅
腾讯云CDN全球海量节点流量包
全国海量加速节点 避免网络拥堵 提供流畅的用户体验
立即抢购
在这篇文章中：
登录流程图
示例预览
构建步骤
当然，你也可以直接之前前往coding仓库查看源码，要是发现bug记得提醒我啊~ LoginDemo地址
1. 首先你得有一个项目
2. 然后你需要一个登录页面
完整Login.cshtml视图代码戳这里-共计55行 效果预览图
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>登录界面</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style type="text/css"> body { color: #fff; font-family: "微软雅黑"; font-size: 14px; background: url('https://dn-coding-net-production-pp.qbox.me/96ec8cc7-0e5f-4217-b853-4a88c15579f3.png') no-repeat; } .wrap1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 450px; } /*把整个屏幕真正撑开--而且能自己实现居中*/ .main_content { background: url(https://dn-coding-net-production-pp.qbox.me/2ed70a05-04ad-4ccf-81d4-bc1fad2b6e41.png) repeat; margin-left: auto; margin-right: auto; text-align: left; float: none; border-radius: 8px; } .form-group { position: relative; } .login_btn { display: block; background: #3872f6; color: #fff; font-size: 15px; width: 100%; line-height: 50px; border-radius: 3px; border: none; } .login_input { width: 100%; border: 1px solid #3872f6; border-radius: 3px; line-height: 40px; padding: 2px 5px 2px 30px; background: none; } .icon_font { position: absolute; top: 12px; left: 10px; font-size: 18px; color: #3872f6; } .font16 { font-size: 16px; } .mg-t20 { margin-top: 20px; } @media (min-width:200px) {.pd-xs-20 { padding: 20px; }} @media (min-width:768px) {.pd-sm-50 { padding: 50px; }} #grad { background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */ background: -moz
2791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
