js实现带泡泡上浮背景的登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:js实现带泡泡上浮背景的登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
* {
margin:0;
padding:0
}
body {
margin:0;
padding:0;
font:normal 14px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
}
div {
display:block
}
a {
text-decoration:none;
opacity:1;
color:#fff
}
button,input {
outline:0
}
::-moz-focus-inner {
border:0
}
.login_header {
position:absolute;
top:0;
left:0;
right:0
}
#logo {
display:block;
text-align:center;
font-weight:700;
font-size:50px;
color:#fff;
height:100%;
text-shadow:2px 2px 3px rgba(0,0,0,0.5)
}
#subheading {
position:relative;
width:517px;
left:50%;
margin:10px 0 16px -258px;
font-size:15px;
font-weight:400;
color:#fff;
text-align:center
}
.signup_forms {
width:260px;
height:145px
}
.signup_forms_container {
width:260px;
overflow:hidden;
background:#fff;
border-radius:3px
}
.form_password,.form_user {
width:260px;
height:45px;
margin:0;
padding:0;
border:0
}
.form_password {
border-top:1px solid #e3e3e3
}
.signup_forms input {
padding:11px 10px 11px 13px;
width:100%;
margin:0;
background:0;
font:16px/1.4 "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
border:0
}
#signup_forms_submit {
margin-top:8px;
width:260px;
height:45px;
background:#529ECC;
border:0;
border-radius:3px;
cursor:pointer
}
#signup_forms_submit span {
color:#fff;
font:"Helvetica Neue",Arial,Helvetica,sans-serif;
font-size:16px
}
.footer {
position:fixed;
top:auto;
right:0;
bottom:0;
left:0
}
.footer_signup_link {
position:absolute;
width:141px;
height:78px;
bottom:0;
padding:0 20px;
margin:0 0 13px 0;
line-height:25px;
text-align:center;
opacity:1;
color:#fff
}
.signup_link {
display:block;
height:45px;
padding:0 10px;
margin:0 0 8px 0;
font-size:16px;
font-weight:700;
line-height:45px;
border:0;
border-radius:2px;
color:#fff;
background:rgba(255,255,255,.33)
}
.link {
font-size:14px;
padding-right:5px;
margin-right:12px;
color:#fff
}
.design_show {
position:fixed;
bottom:0;
right:0;
padding:0 12px;
margin:0 0 13px 0;
line-height:25px
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0