HTML+CSS仿西瓜视频登录界面

? !
已于 2023-03-26 21:51:13 修改
阅读量197
点赞数
分类专栏： web前端基础文章标签： css html5 css3 前端 Powered by 金山文档
于 2023-03-26 21:38:36 首次发布
本文链接：https://blog.csdn.net/qq_44829421/article/details/129785136
版权
web前端基础专栏收录该内容
5 篇文章 2 订阅
订阅专栏
效果图：

代码展示：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>西瓜视频登录</title>
        <style type="text/css">
            body {
                background-color: #ccc;
            }

            .container {
                width: 660px;
                height: 480px;
                margin: 100px auto 100px;
                background-color: white;
                border-radius: 5px;
            }

            .head_1 {
                width: 610px;
                height: 66px;
                padding-left: 25px;
                padding-right: 25px;
                border-bottom: 1px solid #F1F1F1;
            }

            .head_1>.font_1 {
                font-size: 20px;
                color: #0c0d0f;
                line-height: 66px;
            }

            .head_1>.close {
                display: inline-block;
                line-height: 66px;
                font-weight: bold;
                color: #999999;
                float: right;
            }

            .body_1 {
                width: 660px;
                height: 260px;
                padding-top: 40px;
            }

            .body_1>.box_1 {
                width: 330px;
                height: 260px;
                padding-left: 60px;
                padding-right: 28px;
                border-right: 1px solid #F1F1F1;
                float: left;
            }

            .body_1>.box_2 {
                width: 241px;
                height: 260px;
                float: left;
            }

            .foot_1 {
                width: 330px;
                height: 20px;
                padding-left: 60px;
                padding-right: 28px;
                margin-top: 16px;
                margin-bottom: 36px;
            }

            .foot_2 {
                width: 475px;
                height: 20px;
                color: #606266;
                font-size: 14px;
                padding-bottom: 20px;
                padding-left: 185px;
            }

            .line_1,
            .box_2_l1 {
                width: 330px;
                height: 20px;
                padding-bottom: 16px;
                font-size: 16px;
                color: #0c0d0f;
            }

            .line_2,
            .line_3 {
                width: 310px;
                height: 32px;
                background-color: #F2F2F2;
                padding: 8px 10px;
            }

            .line_2>select {
                height: 32px;
                background-color: #F2F2F2;
                border: none;
                text-indent: 4px;
            }

            .line_2>.input_1 {
                width: 245px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }

            .line_3 {
                margin-top: 20px;
                font-size: 15px;
                color: #606266;
            }

            .line_3>.input_2 {
                width: 240px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }

            .line_4 {
                width: 330px;
                height: 40px;
            }

            .line_5 {
                width: 330px;
                height: 20px;
                font-size: 12px;
            }

            .line_5>.input_3 {
                width: 6px;
                height: 8px;
                border: 1px solid #F1F1F1;
                border-radius: 3px;
            }

            .line_6 {
                width: 330px;
                height: 48px;
            }

            .line_6>button {
                width: 330px;
                height: 48px;
                border: none;
                border-radius: 2px;
                background-color: #fe3355;
                color: #ffffff;
                font-size: 16px;
            }

            .box_2_l1 {
                width: 213px;
                padding-left: 28px;
                padding-bottom: 0px;
            }

            .box_2_l2 {
                width: 187px;
                height: 206px;
                margin-top: 16px;
                padding: 0px 28px;
            }

            .box_2_l2>.img_1 {
                width: 85%;
            }

            [class^="font_line"] {
                font-size: 14px;
                color: #606266;
                margin-bottom: 0px;
            }

            .font_line_2 {
                margin-top: 0px;
            }

            [class^="foot_font"] {
                font-size: 14px;
                color: #606266;
            }

            .foot_1>img {
                height: 20px;
            }

            .foot_font_2 {
                margin-left: 82px;
            }

            .input_4 {
                width: 12px;
                height: 12px;
            }

            .link_1 {
                color: #236ddb;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="head_1">
                <span class="font_1">登录</span>
                <span class="close">X</span>
            </div>
            <div class="body_1">
                <div class="box_1">
                    <div class="line_1">密码登录</div>
                    <div class="line_2">
                        <select name="" id="">
                            <option>+86</option>
                            <option>+852</option>
                            <option>+853</option>
                            <option>+886</option>
                        </select>
                        <input type="text" class="input_1" name="" id="" placeholder="请输入手机号">
                    </div>
                    <div class="line_3">
                        <input type="password" class="input_2" name="password" id="" placeholder="请输入密码"">忘记密码
                </div>
                <div class=" line_4">
                    </div>
                    <div class="line_5">
                        <input class="input_3 type=" checkbox" name="记住密码" id="">
                        <span class="font_2">记住密码</span>
                    </div>
                    <div class="line_6">
                        <button>登录</button>
                    </div>
                </div>
                <div class="box_2">
                    <div class="box_2_l1">扫码登录</div>
                    <div class="box_2_l2">
                        <img class="img_1" src="./img/西瓜二维码.png" alt="">
                        <p class="font_line_1">
                            打开
                            <span style="color: #fe3355;">
                                西瓜视频手机APP
                            </span>
                        </p>
                        <p class="font_line_2">
                            我的-扫一扫登录
                            <span>
                                <img src="./img/问号.png" alt="" style="width: 14px;">
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="foot_1">
                <span class="foot_font_1">
                    其他方式：
                </span>
                <img src="./img/抖音.png" alt="">
                <img src="./img/QQ.png" alt="">
                <img src="./img/微信.png" alt="">
                <span class="foot_font_2">
                    手机验证码登录
                </span>
            </div>
            <div class="foot_2">
                <input class="input_4" type="checkbox" name="用户协议" id="">
                登录即代表你同意<a class="link_1" href="https://www.ixigua.com/user_agreement/" target="_blank">用户协议</a>和<a
                    class="link_1" href="https://www.ixigua.com/privacy_policy/" target="_blank">隐私政策</a>
            </div>
        </div>
    </body>
</html>