bootstrap自适应登录页面代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap自适应登录页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style type="text/css"> body{ background: url(//repo.bfw.wiki/bfwrepo/image/61923f261c983.png) no-repeat; background-size: cover; height: 100vh; } .form-bg { margin-top:100px; padding:2em 0; } .form-horizontal { background:#fff; padding-bottom:40px; border-radius:15px; text-align:center; } .form-horizontal .heading { display:block; font-size:35px; font-weight:700; padding:35px 0; border-bottom:1px solid #f0f0f0; margin-bottom:30px; } .form-horizontal .form-group { padding:0 40px; margin:0 0 25px 0; position:relative; } .form-horizontal .form-control { background:#f0f0f0; border:none; border-radius:20px; box-shadow:none; padding:0 20px 0 45px; height:40px; transition:all 0.3s ease 0s; } .form-horizontal .form-control:focus { background:#e0e0e0; box-shadow:none; outline:0 none; } .form-horizontal .form-group i { position:absolute; top:12px; left:60px; font-size:17px; color:#c8c8c8; transition:all 0.5s ease 0s; } .form-horizontal .form-control:focus + i { color:#00b4ef; } .form-horizontal .fa-question-circle { display:inline-block; position:absolute; top:12px; right:60px; font-size:20px; color:#808080; transition:all 0.5s ease 0s; } .form-horizontal .fa-question-circle:hover { color:#000; } .form-horizontal .main-checkbox { float:left; width:20px; height:20px; background:#11a3fc; border-radius:50%; position:relative; margin:5px 0 0 5px; border:1px solid #11a3fc; } .form-horizontal .main-checkbox label { width:20px; height:20px; position:absolute; top:0; left:0; cursor:pointer; } .form-horizontal .main-checkbox label:after { content:""; width:10px; height:5px; position:absolute; top:5px; left:4px; border:3px solid #fff; border-top:none; border-right:none; background:t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0