bootstrap登录注册切换表单页面代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap登录注册切换表单页面代码,页面背景颜色跟随注册登录表单换色。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.9.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body {
display:flex;
height:100vh;
min-height:35rem;
align-items:center;
justify-content:center;
font-family:josefin sans,sans-serif
}
.card {
position:absolute;
top:50%;
left:50%;
width:100%;
padding-top:1rem;
padding-bottom:1rem;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}
.card-wrap {
position:relative;
margin:0 auto
}
@media(min-width:769px) {
.card-wrap {
max-width:450px
}
}.card-body {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center
}
.card-body p {
font-size:1.1rem
}
.card-title {
font-weight:700;
font-size:1.8rem
}
.badge-wrap {
display:flex;
justify-content:center
}
.badge-wrap a.badge {
display:flex;
align-items:center;
justify-content:center;
width:2.5rem;
height:2.5rem;
margin:0 .2rem;
padding:0;
opacity:.7;
border-radius:50%;
transition:opacity .3s ease-in;
font-size:1rem;
color:#fff;
text-decoration:none;
cursor:pointer
}
.badge-wrap a..........完整代码请登录后点击上方下载按钮下载查看
网友评论0