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 1p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0