扫码加账户密码第三方登录页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：扫码加账户密码第三方登录页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
    @charset "utf-8";
html { color: #333;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0}
body,button,input,select,textarea { font: 12px/1.5 tahoma,arial,'微软雅黑'; color: #666 }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 400 }
address,cite,dfn,em,var,caption,strong,th,i,code,kbd,pre,samp { font-style: normal; font-weight: 400}
ul,ol { list-style: none}
sub,sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline }
sup { top: -0.5em}
sub { bottom: -0.25em }
input,button,textarea,fieldset,img { border: 0 none }
button,input,select,textarea { font-size: 100%; vertical-align: middle; font-family: inherit}
textarea { overflow: auto; vertical-align: top}
table { border-collapse: collapse; border-spacing: 0 }
th { text-align: inherit}
caption,th { text-align: center}
a { text-decoration: none; color: #666}
a:hover { text-decoration: none; color: #d00 }
.clearfix:before,.clearfix:after { display: table; content: ''}
.clearfix:after { clear: both}
.clearfix { *zoom:1}
q:before,q:after { content: ""}
.clear { clear: both}
iframe { display: block }
abbr,acronym { border: 0 none; font-variant: normal}
del { text-decoration: line-through}
.fl { float: left}
.fr { float: right}
.fc { clear: both}
.fz { zoom:1}
img { border: none 0 }
input { _border: none; outline: none}
a {color: #666;}
a:hover {color: #dd0000;}
/*header*/
#header{ background:#fff; height:84px; padding:0;}
#header .wrap{ position:relative; width:1190px; height:84px; margin:0 auto;}
#header .logo_jia{ position:absolute; top:2px; left:0; width:300px; height:80px;}
#header .title{ position:absolute; left:238px; bottom:20px; line-height:1; font-size:24px; color:#333; font-family:"Microsoft YaHei",sans-serif;}

/*login*/
.login-wrap{ width:100%; height:480px;    background: #36AABD;}
.login-wrap .wrap{ width:960px; height:480px; padding:0 115px; margin:0 auto;}

/*login左侧banner图*/
.J_slide_wrap{width:580px;height:480px;position: relative;overflow: hidden;}
.J_slide_wrap li {float:left;}
.J_slide_wrap ul{position: absolute;left:0;top:0;height:100%;}
.J_slide_wrap ul li{width:580px;height:480px;position: absolute;opacity: 0;filter:alpha(opacity:0);}
.J_slide_wrap ul li:first-child{opacity: 1;filter:alpha(opacity:100);}
.J_slide_wrap li img{ width:100%; height:100%;}
.J_slide_wrap ol {position: absolute;width:100%;height:9px;bottom:8px;text-align: center;font-size: 0;}
.J_slide_wrap ol li {width:9px;height:9px;border-radius: 50%;background:#fff;margin-right: 8px;display:inline-block;float: none;}
.J_slide_wrap ol li.cur {background:#d00;}
.J_slide_wrap>span {position: absolute;top:50%;width:40px;height:70px; margin-top:-35px;background: url(../images/slide_btn_bg.png) left top no-repeat;display: none;cursor: pointer;}
.B_prev_btn {left:0;}
.B_prev_btn:hover {background-position: -40px 0;}
.J_slide_wrap .B_next_btn {right:0;background-position: -40px -70px;}
.J_slide_wrap .B_next_btn:hover {background-position: left bottom;}

/*login右侧登录框*/
.login-wrap .form-box{ width:380px; min-height:410px; _height:410px; margin-top:35px; background:#fff;}
.form-box .form-tab{ width:380px; height:52px; border-bottom:1px solid #ddd; font-family:"Microsoft YaHei";}
.form-tab .tab-li{ float:left; width:50%; height:50px; border-bottom:2px solid #fff;}
.form-tab .tab-li a{ position:relative; display:block; text-align:center; height:50px; line-height:52px; font-size:18px; color:#999; text-decoration:none;}
.form-tab .tab-li.cur{ border-bottom-color:#d00;}
.form-tab .tab-li.cur a{ color:#d00;}
.form-tab .tab-li .icon{ position:absolute; top:10px; width:18px; height:14px; margin-left:6px; background:url(//repo.bfw.wiki/bfwrepo/image/605bd722a6dc7.png) 0 0 no-repeat;}

.form-box .form-con{ width:434px; height:345px; padding:38px 28px 0;}
.form-box .weixin-login{ width:380px; padding-top:50px;}
.login-add .form-con{ height:342px; padding-top:41px;}
.form-box .login-normal,.form-box .login-partner{ display:none;position:relative; width:354px; padding:0 40px;}
.form-box .form-error{ display:none; position:absolute; top:-32px;max-height: 32px; padding:4px 6px 4px 12px; border:1px solid #ffddbc; background:#fffceb;}
.form-box .form-error i{ position:absolute; top:4px; left:12px; width:16px; height:16px;background: url(//repo.bfw.wiki/bfwrepo/image/605bd8738ce76.png) -124px 0 no-repeat;}
.form-box .form-error .text{display:block;max-width: 258px; padding-left:22px; line-height:16px; font-family:"Microsoft YaHei"; color:#666;/*  white-space:nowrap;background:url(//repo.bfw.wiki/bfwrepo/image/605bd8738ce76.png) -124px 0 no-repeat; */ }
.form-box dl{ position:relative; width:350px; height:20px; line-height:20px; padding:16px 0; border:1px solid #ddd; font-family:"Microsoft YaHei"; font-size:14px;}
.login-add dl{padding:14px 0;}
.form-box .error{ z-index:5; border-color:#f66;}
.form-box .top1{ top:-1px;}
.form-box .top2{ top:-2px;}
.form-box .top3{ top:-3px;}
.form-box dt{ float:left; width:60px; height:20px; line-height:20px; padding-le.........完整代码请登录后点击上方下载按钮下载查看