bootstrap自适应登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap自适应登录表单页面代码
代码标签: bootstrap 自适应 登录 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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> html { height:100% } body { background:url('//repo.bfw.wiki/bfwrepo/image/63e310a003def.png') #f2f2f2; background-size: cover; font-family:'Varela',sans-serif; font-size:14px; line-height:1.5; color:#333; min-height:100%; position:relative } label { margin-top:6px; line-height:17px } hr { border-top:1px solid #BAC8D6 } a { color:#05A09A } a:focus,a:hover { color:#ccc } .checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline { margin-top:6px } .logo .fa { font-size:50px } .top-bar h1 { font-size:25px; color:#fff; text-shadow:0 0 12px #aaa } .wrapper { padding:10px; padding-bottom:100px } .logo img { width:100% } .relative { position:relative } .login-container-wrapper .logo,.login-container-wrapper .welcome { margin:0 0 20px 0; font-size:16px; color:#fff; text-align:center; letter-spacing:1px; text-shadow:0 0 5px #000 } .login-container-wrapper .logo { text-align:center; position:absolute; top:-38px; margin:0 auto; width:90px; left:50%; margin-left:-45px; border-radius:50%; background-color:#1d5256; padding:20px; box-shadow:0 3px 2px 0 #000 } .login-container-wrapper { max-width:400px; margin:15% auto; padding:40px; border-radius:50px 0; box-sizing:border-box; background:#1d5256; box-shadow:1px 1px 4px 0 #000,8px 8px 0 0 #a2703f,9px 9px 4px 0 #000,16px 16px 0 0 #ac411f,17px 17px 7px 1px #000; position:relative; padding-top:80px } .login-form .form-group { margin-right:0; margin-left:0 } .login input:focus+.fa { color:#1d5256 } .login-form i { position:absolute; top:18px; right:20px; color:#a2703f } .login-form .input-lg { font-size:16px; height:52px; padding:10px 25px; border-radius:0 } .login input[type="text"],.login input[type="password"],.login input:focus { background-color:rgba(255,255,255,0.9); border:1px solid #a2703f; color:#eee; border-left:4px solid rgba(150,103,58,0.99) } .login input:focus { border-left:4px solid #ccd8da } input:focus i { color:#fff!important } input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill { background-color:rgba(40,52,67,0.75)!importa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0