HTML+CSS仿b站登录注册页面附源码

效果图

二维码区域放上有过渡效果

源码

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;
}