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