猫眼APP登录页静态界面

最新推荐文章于 2026-01-25 16:43:06 发布

原创最新推荐文章于 2026-01-25 16:43:06 发布 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html5 #html #sass

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

14 篇文章

订阅专栏

本文详细介绍了如何使用HTML5和CSS3技术，结合Sass预处理器，来设计并实现猫眼APP的静态登录页面。内容涵盖布局、样式、响应式设计等关键点，旨在提供一个完整的登录界面设计方案。

<!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/login.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>
        <p><a href="#21">忘记密码</a></p>
    </header>
    <!-- 包含logo部分 -->
    <!-- div2 -->
    <div>
        <div><img src="./IMG/maotou.png" alt="猫眼"></div>
        <a href="#34">美团账号登录</a>
    </div>
    <form action="#" method="POST">
        <!-- 上输入 -->
        <div>
            <label for="account">用户名：</label>
            <input type="text" id="account" placeholder="邮箱/手机号/用户名" required>
        </div>
        <!-- 下输入 -->
        <div>
            <label for="pas">密&nbsp;&nbsp;&nbsp;码：</label>
            <input type="password" id="pas" placeholder="密码" required>
        </div>
    </form>
    <!-- div3 -->
    <div>
        <a href="./reying.html">登录</a>
        <div>
            <a href="./regist.html">立即注册</a>
            <a href="#24">手机号快捷登录&nbsp;></a>
        </div>
    </div>
    <!-- div4 -->
    <div>
        <div>
            <span>......................</span>
            <p>第三方账号登录</p>
            <span>......................</span>
        </div>
        <div>
            <figure>
                <img src="./IMG/weixin.gif" alt="微信">
                <figcaption>微信</figcaption>
            </figure>
            <figure>
                <img src="./IMG/QQ.gif" alt="QQ">
                <figcaption>QQ</figcaption>
            </figure>
            <figure>
                <img src="./IMG/weibo.gif" alt="微博">
                <figcaption>微博</figcaption>
            </figure>
            <figure>
                <img src="./IMG/baidu.gif" alt="百度">
                <figcaption>百度</figcaption>
            </figure>
        </div>
    </div>
    <div class="bottom"></div>
</body>

</html>

@mixin f_ce_ce {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin  f_be_ce {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
body {
    >div:nth-of-type(2) {
        margin-top: 2.24rem;
        height: 4.3rem;
        box-sizing: border-box;
        padding: 0.72rem 0.38rem 0.35rem;
        background-color: #f5f5f5;
        >div {
            @include f_ce_ce;
            height: 1.95rem;
            width: 1.95rem;
            margin: 0 auto;
            box-sizing: border-box;
            border: 7px solid #e7e7e7;
            border-radius: 50%;
            margin-bottom: 0.8rem;
            >img {
                height: 1.77rem;
                width: 1.77rem;
            }
        }
        >a {
                color: #989898;
        }
    }
    >form {
        background-color: white;
        height: 3rem;
        box-sizing: border-box;
        border-top: 2px #e4e4e4 solid;
        border-bottom: 2px #e4e4e4 solid;
        padding-left: 0.45rem;
        font-size: 0.47rem;
        >div {
            height: 1.5rem;
            box-sizing: border-box;
            padding: 0.5rem 0;
            margin-right: 0.45rem;
            @include f_be_ce;
            >label {
                line-height: 1;
                display: inline-block;
                width: 2rem;
            }
            >input {
                flex: 1;
                font-size: 0.47rem;
                border: 0;
                &::-webkit-input-placeholder {
                    color: #cbcbcb;
                }
                &:focus {
                    outline: none;
                }
            }
        }
        >div:nth-of-type(1) {
            border-bottom: 2px #e4e4e4 solid;
        }
    }
    >div:nth-of-type(3) {
        padding: 0.6rem 0.45rem 1.07rem;
        >a {
            text-align: center;
            line-height: 1.35rem;
            display: inline-block;
            width: 100%;
            height: 1.35rem;
            background-color: #f14e40;
            box-sizing: border-box;
            border-radius: 20px;
            font-size: 0.45rem;
            color: white;
        }
        >div {
            margin-top: 0.45rem;
            @include f_be_ce;
            >a {
                color: #f14e40;
                font-size: 0.38rem;
            }
        }
    }  
    >div:nth-of-type(4) {
        font-size: 0.48rem;
        width: 9.3rem;
        margin: 0 auto;
        margin-top: 1rem;
        margin-bottom: 2.6rem;
        >div:nth-of-type(1) {
            @include f_ce_ce;
            color: #969696;
            >span {
                line-height: 1;
                margin-top: -0.25rem;;
            }
            p {
                flex: 1;
                text-align: center;
            }
        }
        >div:nth-of-type(2) {
            @include f_be_ce;
            width: 7.5rem;
            margin: 0 auto;
            margin-top: 0.6rem;
            >figure {
                >img {
                    width:  1.2rem;
                    height: 1.2rem;
                }
                >figcaption {
                    padding-top: 0.36rem;
                    text-align: center;
                    font-size: 0.44rem;
                }
            }
        }
    }      
}