效果图
二维码区域放上有过渡效果
源码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哔哩哔哩弹幕视频网 - ( ゜- ゜)つロ 乾杯~ - bilibili</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="login-app">
<div class="bottom-filling">
<div class="whole">
<div class="top-banner">
<img src="images/top-image.png" alt="">
</div>
<div class="title-line">
<span class="tit">
登录
</span>
</div>
<div class="login-box">
<div class="login-left">
<div class="qrcode-login">
<div class="qrcode-con">
<i class="tv-icon"></i>
<div class="qrcode-box">
<div class="qrcode-img">
<img src="images/qr-code.png" alt="">
</div>
<div class="qrcode-tips"></div>
</div>
</div>
<div class="qrcode-footer">
<p class="status-txt">
扫描二维码登录
</p>
<p class="app-link">
请使用
<a href="##">
哔哩哔哩客户端
</a>
<br>
扫码登陆
<br>
或扫码下载APP
</p>
</div>
</div>
</div>
<div class="line"></div>
<div class="login-right">
<div class="form-login">
<div class="input-box">
<div>
<div class="type-tab">
<span>密码登录</span>
<span class="active">短信登录</span>
</div>
<div>
<div class="form-group">
<div class="input-with-select">
<div class="el-input-group__prepend">
<div class="el-select">
<div class="el-input">
<select name="" class="el-input__inner">
<option value="">中国大陆</option>
<option value="">中国香港特别行政区</option>
<option value="">中国澳门特别行政区</option>
<option value="">中国台湾</option>
<option value="">美国</option>
<option value="">比利时</option>
<option value="">澳大利亚</option>
<option value="">法国</option>
<option value="">加拿大</option>
<option value="">日本</option>
<option value="">新加坡</option>
<option value="">韩国</option>
<option value="">马来西亚</option>
<option value="">英国</option>
<option value="">意大利</option>
<option value="">德国</option>
</select>
</div>
</div>
</div>
<div class="inputbox">
<input type="text" class="el-input__inner" placeholder="填写常用手机号">
</div>
</div>
</div>
<div class="message">
<div class="inputbox2">
<input type="text" class="el-input__inner" placeholder="请输入短信验证码">
</div>
<button class="code-button">
<span>获取验证码</span>
</button>
</div>
<div class="remember">
<div class="remember-tool">
<label>
<label class="remember-check">
</label>
记住我
<span>不是自己的电脑上不要勾选此项</span>
</label>
<div>
<a href="##" class="forget-password">
忘记密码?
</a>
<a href="##" class="not-checkout">
无法验证?
</a>
</div>
</div>
</div>
<div class="btn-box">
<a href="##" class="btn-login">
登录
</a>
<a href="##" class="btn-reg">
注册
</a>
</div>
<div class="sns">
<a href="##" class="weixin">
微信账号登录
</a>
<a href="##" class="QQ">
QQ账号登录
</a>
<a href="##" class="weibo">
微博账号登录
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="banner-foot">
登录即代表你同意
<a href="##">
用户协议
</a>
和
<a href="##">
隐私政策
</a>
</p>
</div>
</div>
<div class="international-footer">
<div class="link-box">
<div class="footer_left">
<div class="link-a">
<span class="bt">bilibili</span>
<ul>
<a href="##">关于我们</a>
<a href="##">联系我们</a>
<a href="##">用户协议</a>
<a href="##" class="spe">加入我们</a>
<a href="##">友情链接</a>
<a href="##">隐私政策</a>
<a href="##">bilibili认证</a>
<a href="##" class="spe">Investor Relations</a>
</ul>
</div>
<div class="link-b">
<span class="bt">传送门</span>
<ul>
<a href="##">协议汇总</a>
<a href="##">活动中心</a>
<a href="##">活动专题页</a>
<a href="##" class="spe">侵权申诉</a>
<a href="##">帮助中心</a>
<a href="##">社区中心</a>
<a href="##">壁纸站</a>
<a href="##" class="spe">广告合作</a>
<a href="##">名人堂</a>
<a href="##">MCN管理中心</a>
<a href="##">高级弹幕</a>
<a href="##" class="spe">品牌号官网</a>
</ul>
</div>
</div>
<div class="footer_right">
<div class="link-item">
<div class="a-wraper">
<a href="##" class="biliapp">
<i class="bili-footer-font"></i>
<p>下载APP</p>
</a>
</div>
</div>
<div class="link-item">
<div class="a-wraper">
<a href="##" class="biliapp">
<i class="bili-footer-font"></i>
<p>公益</p>
</a>
</div>
</div>
<div class="link-item">
<div class="a-wraper">
<a href="##" class="biliapp">
<i class="bili-footer-font"></i>
<p>新浪微博</p>
</a>
</div>
</div>
<div class="link-item">
<div class="a-wraper">
<a href="##" class="biliapp">
<i class="bili-footer-font"></i>
<p>官方微信</p>
</a>
</div>
</div>
</div>
</div>
<div class="partner">
<div class="pic-box">
<img src="images/partner-1.png" alt="" class="pic">
<img src="images/partner-2.png" alt="" class="pic-2">
</div>
<div class="text-con">
<p>
<span>
<a href="##">
营业执照
</a>
</span>
<span>信息网络传播视听节目许可证：0910417</span>
<span>网络文化经营许可证 沪网文【2019】3804-274号</span>
<span>广播电视节目制作经营许可证：（沪）字第01248号</span>
<span>增值电信业务经营许可证 沪B2-20100043</span>
<span>
互联网ICP备案：
<a href="##">
沪ICP备13002172号-3
</a>
</span>
<span>出版物经营许可证 沪批字第U6699 号</span>
<span>互联网药品信息服务资格证 沪-非经营性-2016-0143</span>
<span>营业性演出许可证 沪市文演（经）00-2253</span>
</p>
<p>
不良信息举报邮箱：[email protected] | 涉未成年举报邮箱：[email protected] | 不良信息举报电话：4006262233转1
</p>
<p>
<i class="sprite"></i>
<a href="##">上海互联网举报中心</a>
|
<a href="##">12345政务服务便民热线</a>
|
<i class="sprite-bg2"></i>
<a href="##">
沪公网安备31011002002436号
</a>
|
<a href="##">
儿童色情信息举报专区
</a>
|
<a href="##">
扫黄打非举报
</a>
</p>
<p>
<p>
亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
</p>
<p>
公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888
</p>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.login-app {
width: 100%;
height: auto;
margin: 0 auto;
}
.top-banner {
background: #00a0d8;
height: 86px;
text-align: center;
margin-bottom: 20px;
}
.title-line {
width: 980px;
height: 28px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
margin-bottom: 28px;
text-align: center;
}
.title-line .tit {
height: 38px;
line-height: 56px;
margin: 0 auto;
padding: 0 20px;
font-size: 40px;
background: #fff;
text-align: center;
}
.login-box {
display: flex;
position: relative;
width: 980px;
margin: 0 auto;
}
.login-box::after {
content: "";
display: block;
clear: both;
}
.login-box .login-left {
width: 489px;
}
.qrcode-login {
position: relative;
width: 480px;
}
.qrcode-login .qrcode-con {
padding-top: 72px;
}
.tv-icon {
/*图片第一个就是需要的图标，不需要设置背景图片位置*/
background: url(images/index-com.png) no-repeat;
position: absolute;
width: 70px;
height: 70px;
left: 160px;
top: 10px;
}
.qrcode-login .qrcode-con .qrcode-box {
width: 140px;
height: 140px;
margin: 0 auto;
background: #ddd;
position: relative;
}
.qrcode-img {
width: 140px;
height: 140px;
}
.qrcode-img>img {
display: block;
}
.qrcode-tips {
position: absolute;
width: 480px;
height: 192px;
top: -50px;
left: 50%;
margin-left: -240px;
background: url(images/bc.png) no-repeat;
/*规定把背景图片拓展至足够大，完全覆盖背景区域*/
background-size: cover;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.qrcode-tips:hover {
opacity: 1.0;
}
.qrcode-login .qrcode-footer {
width: 480px;
height: 155px;
background: url(images/2233login.png) 0 -7px no-repeat;
}
.qrcode-login .qrcode-footer .status-txt {
padding-top: 20px;
text-align: center;
color: #222;
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 5px;
}
.app-link {
text-align: center;
color: #717171;
font-size: 14px;
}
.app-link>a {
color: #00a1d6;
}
.login-box .line {
border-right: 1px solid #ddd;
height: 300px;
margin-top: 28px;
}
.login-box .login-right {
padding-left: 45px;
width: 490px;
box-sizing: border-box;
}
.form-login {
position: relative;
}
.type-tab {
display: flex;
cursor: pointer;
/*均等的分割多余的空间，一半位于子元素之上，一半位于之下*/
-webkit-box-align: center;
/*将弹性项目居中*/
align-items: center;
margin-bottom: 12px;
}
.form-login .input-box {
margin-top: 50px;
width: 414px;
}
.login-box .type-tab>span {
font-size: 14px;
color: #555;
letter-spacing: 0;
margin-right: 20px;
}
.active {
color: #02a7de !important;
}
.form-grounp {
position: relative;
}
.input-with-select {
/*内联表格形式，中间没有空隙*/
display: inline-table;
width: 100%;
position: relative;
font-size: 14px;
}
.el-input-group__prepend {
display: table-cell;
border-color: #fff;
color: #909399;
vertical-align: middle;
padding: 0 20px;
width: 1px;
/*文本不会换行，直到遇到br*/
white-space: nowrap;
}
.el-select {
position: relative;
display: inline-block;
margin: -10px -20px;
}
.el-input {
display: block;
position: relative;
width: 130px;
}
.el-input__inner {
display: inline-block;
background-color: #fff;
height: 40px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
line-height: 40px;
color: rgb(151, 155, 159);
box-sizing: border-box;
}
.el-input__inner:hover {
border-color: #02a7de;
}
.el-input__inner>option {
/* display: block; */
position: relative;
font-size: 14px;
background-color: #fff;
color: #606266;
width: 90px;
height: 34px;
}
.el-input>.el-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
transition: 0.5s;
}
.inputbox {
position: relative;
margin-left: 19px;
}
.inputbox>.el-input__inner {
width: 251px;
height: 40px;
padding: 0 15px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transition: .5s;
}
.el-input__inner:focus {
border-color: #00a0d8;
}
.message {
position: relative;
width: 399px;
height: 40px;
border: 1px solid #dcdfe6;
border-radius: 5px;
margin-top: 32px;
margin-bottom: 32px;
}
.inputbox2 {
width: 267px;
height: 40px;
}
.inputbox2>.el-input__inner {
width: 100%;
border: 0;
color: #c0c4cc;
}
.code-button {
cursor: pointer;
width: 130px;
height: 34px;
position: absolute;
right: 2px;
top: 2px;
padding: 0 4px;
background-color: #00a1d6;
border-radius: 5px;
border: 0;
transition: .2s;
}
.code-button>span {
font-size: 14px;
color: #fff;
}
.code-button:hover {
background: #33b4de;
}
.remember {
margin: 10px 0;
color: #717171;
width: 410px;
font-size: 12px;
}
.remember-tool {
display: flex;
position: relative;
width: 401px;
height: 16px;
}
.remember-tool>label {
display: flex;
cursor: pointer;
margin-right: 45px;
}
.remember-check {
display: inline-block;
width: 14px;
height: 14px;
background: url(images/label-1.svg) no-repeat;
cursor: pointer;
margin-right: 8px;
}
.remember-tool>label span {
color: #bbb;
margin-left: 10px;
}
.forget-password {
float: right;
color: #00a1d6;
}
.not-checkout {
float: right;
margin-right: 10px;
color: #00a1d6;
}
.btn-box {
width: 401px;
height: 38px;
}
.btn-login {
float: left;
width: 184px;
height: 36px;
border: 1px solid #0381aa;
color: #fff;
background-color: #00a7de;
border-radius: 2px;
line-height: 38px;
font-size: 14px;
text-align: center;
transition: all .3s;
}
.btn-reg {
float: right;
width: 184px;
height: 36px;
border: 1px solid #ccc;
border-radius: 2px;
color: #555;
background-color: #fff;
line-height: 38px;
font-size: 14px;
text-align: center;
transition: all .3s;
}
.btn-login:hover {
background: #00bee7;
}
.btn-reg:hover {
background: #f7f7f7;
}
.sns {
padding: 12px 0;
font-size: 12px;
}
.sns a {
color: #717171;
}
.weixin::before {
content: "";
background: url(images/weixin.png) no-repeat;
display: inline-block;
width: 21px;
height: 21px;
vertical-align: middle;
margin-right: 5px;
}
.QQ,
.weibo {
margin-left: 20px;
}
.QQ::before,
.weibo::before {
content: "";
display: inline-block;
background: url(images/weibo-QQ.png) no-repeat;
background-position: 0 -41px;
width: 21px;
height: 21px;
vertical-align: middle;
margin-right: 5px;
}
.weibo::before {
background-position: 0 0;
}
.banner-foot {
margin: 24px auto 0;
width: 980px;
font-size: 12px;
color: #99a2aa;
text-align: center;
line-height: 16px;
}
.banner-foot a {
color: #00a1d6;
border: none;
}
.international-footer {
position: relative;
width: 100%;
min-width: 999px;
margin-top: 30px;
background-color: #f6f9fa;
padding: 30px 0;
}
.link-box {
display: flex;
width: 1160px;
height: 150px;
margin: 0 auto;
font-size: 14px;
}
.footer_left {
display: flex;
flex: 4;
}
.link-a {
flex: 2;
padding-right: 40px;
margin-right: 40px;
border-right: 1px solid #eee;
}
.bt {
font-size: 16px;
color: #999;
display: block;
height: 20px;
margin-bottom: 20px;
}
.link-a ul,
.link-b ul {
width: 287.2px;
height: 110px;
display: flex;
/*规定弹性项目作为列显示*/
flex-direction: column;
/*规定弹性项目必要时拆行或拆列*/
flex-wrap: wrap;
list-style: none;
}
.link-a>ul a,
.link-b>ul a {
display: inline-block;
margin-bottom: 10px;
width: 50%;
height: 20px;
color: #212121;
transition: color 0.3s;
}
.link-a>ul a:hover {
color: #00a1d6;
}
.spe {
margin-bottom: 0 !important;
}
.link-b {
flex: 3;
padding-right: 40px;
margin-right: 40px;
border-right: 1px solid #eee;
}
.link-b>ul a:hover {
color: #00a1d6;
}
.footer_right {
flex: 1;
display: flex;
align-items: center;
}
.link-item {
display: flex;
flex: 2;
justify-content: space-between;
align-items: center;
}
.a-wraper {
flex: 1;
display: flex;
min-width: 70px;
justify-content: center;
align-items: center;
}
.a-wraper a {
position: relative;
display: inline-block;
text-align: center;
color: #212121;
}
.biliapp {
color: #585f69;
}
.bili-footer-font {
font-size: 50px;
}
.a-wraper p {
margin-top: 10px;
color: #212121;
height: 20px;
transition: color 0.2s;
}
.partner {
display: flex;
width: 1160px;
height: 222px;
margin: 0 auto;
padding-top: 30px;
color: #999;
}
.pic-box {
width: 100px;
margin-right: 20px;
}
.partner .pic {
width: 96px;
height: 75px;
}
.partner .pic-2 {
width: 100px;
height: 40px;
margin: 5px 0;
}
.text-con {
width: 1040px;
height: 192px;
}
.text-con p {
line-height: 24px;
font-size: 12px;
}
.text-con span {
margin-right: 15px;
display: inline-block;
font-size: 12px;
}
.partner a {
font-size: 12px;
color: #999;
}
.sprite {
display: inline-block;
background: url(images/foot-icon.png) no-repeat;
width: 16px;
height: 16px;
background-position: 0 -2px;
vertical-align: middle;
}
.sprite-bg2 {
display: inline-block;
background: url(images/foot-icon.png) no-repeat;
width: 18px;
height: 20px;
background-position: -41px 0px;
vertical-align: middle;
}