layui布局实现一个pc端登录页面代码
代码语言:html
所属分类:布局界面
代码描述:layui布局实现一个pc端登录页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <style type="text/css"> @charset "utf-8"; /* CSS Document */ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, iframe, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; vertical-align: baseline } .clearfix:after, .clearfix:before { display: table; content: '' } .clearfix:after { clear: both; overflow: hidden } .clearfix { zoom: 1 } iframe { border: 0 } a, button, img, input, select { outline: 0 none } img { border: 0 none; vertical-align: top } em, i { font-style: normal } ol, ul { list-style: none } button, h1, h2, h3, h4, h5, h6, input, select { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0 } a { color: #333; text-decoration: none } a:hover { cursor: pointer } input:focus, textarea:focus { outline: 0; border: 1px solid #16C09C!important; box-shadow: 0 0 0 2px rgba(22, 192, 156, 0.2); } .fl { float: left; } .fr { float: right; } body { color: #333; background: #fff; font: 12px/1.5 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif; } .header { height: 78px; width: 100%; position: relative; overflow: hidden; } .header-inner { padding: 0 20px; height: 78px; } .header-inner .logo img { height: 50px; } .logo { margin-top: 14px; } .banner { width: 100%; height: 560px; background: url(//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png) no-repeat center center /cover; position: relative; } .grid { width: 1200px; margin: 0 auto; height: 100%; position: relative; } .login-area { box-shadow: 0 9px 30px rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 1); width: 382px; padding: 20px 40px 40px; position: absolute; top: 50%; margin-top: -172px; right: 0; } .login-area h2 { border-bottom: 1px solid #f0f0f0; font-size: 22px; padding-bottom: 15px; font-weight: 700; } .login-area p { margin-bottom: 5px; } .ui-input { height: 20px; line-height: 20px; padding: 0px 10px; background: #fbfbfb; border: 1px solid #c4cccc; transition: border .2s linear 0s, box-shadow .2s linear 0s; vertical-align: middle; border-radius: 4px; display: block; width: 100%; height: 48px; line-height: 48px; box-sizing: border-box; font: 14px/1.5 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif; } .error { display: none; color: #fa5151; height: 18px; line-height: 18px; margin-top: 5px; } .ui-form-item { margin-top: 20px; position: relative } .btn { -moz-user-select: none; background-image: none; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857; margin-bottom: 0; padding: 11px 12px; text-align: center; touch-action: manipulation; vertical-align: middle; white-space: nowrap; } .btn-primary { background-color: #16C09C; border-color: #16C09C; color: #fff } .btn-primary:hover { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0