案例练习-HTML+CSS(Less)实现简单的注册页面(web移动端静态页面)

HTML+CSS(Less)实现简单的注册页面(web移动端静态页面)

web移动端开发简单的项目实训，新手上路练习案例。

一、简介

web移动端的界面实现需要注意到媒体适配，不同的设计图纸的宽度大小，对应到需求的宽度大小，我用到了简单的变量。（less写css真的好用死了）画布多少上案列！

二、代码实现与结果

html代码

 <!-- <script src="../05_day05/01-案例/01-rem/js/flexible.js"></script> -->
    <div class="contain">
        <h4>Welcome</h4>
        <div class="box">
    
           <input class="login hw" type="text" value="登录">
           <input class="password hw" type="text" value="密码">
           <div class="in hw">立即登录</div>

            <div class="other"><a href="#">忘记密码？丨</a><a href="#"> 立即注册</a></div>
        </div>
    </div>

less（less刚接触，真好用啊啊啊）

* {
    margin: 0;
    padding: 0;
    color: #ffffff;
    box-sizing: border-box;
}
//定义变量，因为我的设计图纸的视口宽度是320 因此定义变量以便使用
@vw: 3.2vw;

.hw {
    width: (235/@vw);
    height: (38/@vw);

    margin-bottom: (15/@vw);
    padding-left: (8/@vw);
    
    color: #ffffff;
    font-size: (13/@vw);
    line-height: (38/@vw);

    border-radius: 18px;
    border: solid 1px #ffffff;
    background-color: transparent;
    &:focus{
        border: transparent;
    }
}

.contain {
    height: (667/@vw);
    width: (375/@vw);
    background-image: linear-gradient(to right bottom, #6dcab7, #3979ca);

    h4 {
        position: fixed;
        top: (200/@vw);
        left: (60/@vw);
        font-size: (45/@vw);
    }

    .box {
        position: fixed;
        top: (300/@vw);
        left: (40/@vw);
        width: (235/@vw);
        
        .in {
            text-align: center; 
            background-color: rgb(86, 179, 245);
        }

        .other {

            text-align: center;
            a {
                text-decoration: none;
                font: normal 400 (10/@vw) '微软雅黑';
            }
        }
    }
}

看看结果叭

总结

简单的移动登陆界面，新手上路练习案例！