猫眼APP注册界面布局

最新推荐文章于 2023-03-13 17:24:37 发布

V________

最新推荐文章于 2023-03-13 17:24:37 发布

阅读量390

点赞数

分类专栏：猫眼APP静态界面布局与样式设定文章标签： html html5 css css3 sass

本文链接：https://blog.csdn.net/V________/article/details/110389208

版权

注册流程手机号验证验证码密码设置前端样式

关键词由CSDN通过智能技术生成

猫眼APP静态界面布局与样式设定专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./CSS/public.css">
    <link rel="stylesheet" href="./css/regist.css">
    <script src="./js/auto-size.js"></script>
</head>
<body>
    <!-- div1 -->
    <div class="top"></div>
    <!-- 顶部 -->
    <header class="login_reg">
        <div>
            <a href="javascript:history.go(-1)"><img src="./IMG/fanhuijiantou.gif" alt="返回箭头"></a>
            <p>注册</p>
        </div>
    </header>
    <!-- 提醒步骤 -->
    <!-- div2 -->
    <div>
        <span>输入手机号</span>
        <div><i></i><i></i><i></i></div>
        <span>输入验证码</span>
        <div><i></i><i></i><i></i></div>
        <span>设置密码</span>
    </div>
    <form>
        <label for="tel" >手机号&nbsp;:</label>
        <input type="text " id="tel" placeholder="请输入您的手机号" maxlength="11" required>
    </form>
    <!-- 获取验证码下方 -->
    <!-- div3 -->
    <div>
        <button>获取验证码</button>
        <div>
            <input type="checkbox" id="agree">
            <label for="agree">我已阅读并同意</label>
            <a href="#1">美团网用户协议</a>
        </div>
    </div>
    <div class="bottom"></div>
</body>
</html>

@mixin f_be_ce {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin f__ce {
    display: flex;
    align-items: center;
}
body {
    margin-top: 2.24rem;
    >div:nth-of-type(2) {
        height: 1.65rem;
        padding: 0 0.45rem;
        @include f_be_ce;
        color: #989898;
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        box-sizing: border-box;
        >span:nth-of-type(1) {
            color: #c94b49;
        }
        >div {
            height: 100%;
            width: 0.75rem;
            @include f_be_ce;
            >i {
                width: 0.1rem;
                height: 0.1rem;
                border: 0.01rem solid transparent;
                border-radius: 50%;
                box-sizing: border-box;
                background-color: #9b9695;
            }
        }
        >div:nth-of-type(1) {
            >i:nth-of-type(1) {
                background-color: #cd423a;
            }
            >i:nth-of-type(2) {
                background-color: #b56a62;
            }
        }
    }
    >form {
        @include f_be_ce;
        padding: 0.5rem 0.45rem;
        height: 1.52rem;
        box-sizing: border-box;
        font-size: 0.45rem;
        background-color: white;
        border-bottom: 2px solid #e4e4e4;
            >label {
                display: inline-block;
                width: 2.08rem;
            }
            >input {
                font-size: 0.45rem;
                flex: 1;
                display: inline-block;
                box-sizing: border-box;
                height: 0.52rem;
                width: 7.96rem;
                &::-webkit-input-placeholder {
                color: #cbcbcb;
                }
            }
    }
    >div:nth-of-type(3) {
        padding: 0 0.45rem;
        margin-bottom: 7.65rem;
        >button {
            margin-top: 0.95rem;
            width: 100%;
            height: 1.4rem;
            background-color: #f14e40;
            box-sizing: border-box;
            border-radius: 0.15rem;
            font-size: 0.45rem;
            color: white;
        }
        >div {
            @include f__ce;
            color: #6d6d6d;
            margin-top: 0.3rem;
            position: relative;
            >label {
                @include f__ce;
            }
            >a {
                color: #0b9dee;
                flex: 1;
            }
            >input {
                display: none;
                &:checked~label::before {
                    margin-right: 0.3rem;
                    display: inline-block;
                    content: "";    
                    background-image: url("../IMG/lvduigou.jpg");
                    background-size: 0.64rem 0.64rem;
                    background-position: -0.05rem -0.05rem;
                    height: 0.58rem;
                    width: 0.58rem;
                }
            }
            >label::before {
                margin-right: 0.3rem;
                display: inline-block;
                content: "";
                height: 0.58rem;
                width: 0.58rem;
                border-radius: 50%;
                border: 0.02rem solid gray;
                box-sizing: border-box;
            }
        }
    }
}