iOS转前端之仿写登录页面

最新推荐文章于 2020-09-28 10:58:22 发布

kidd风

最新推荐文章于 2020-09-28 10:58:22 发布

阅读量1.3k

点赞数

分类专栏： iOS开发如何完美转前端开发文章标签： H5登录页面前端登录页面高仿登录页面

本文链接：https://blog.csdn.net/hmh007/article/details/75303101

版权

iOS开发如何完美转前端开发专栏收录该内容

9 篇文章 3 订阅

订阅专栏

今天还是来仿写一个常用的登录界面，巩固一下之前掌握的知识。

同样的我们还是先构建一个项目，创建对应的css文件和html文件，then begin code~

首先是html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎登录</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--面板-->
    <div id="panel">
        <!--面板的头部-->
        <div class="panel-top">
            <h2>欢迎登录CSDN官网</h2>
        </div>
        <!--面板的主要内容-->
        <div class="panel-content">
            <div class="int">
                <label><img src="images/icon_people.png"></label>
                <input type="text" placeholder="您的手机号/用户名">
            </div>
            <div class="int">
                <label><img src="images/icon_password.png"></label>
                <input type="password" placeholder="输入密码">
            </div>
            <div class="pwd-login">
                <a href="#" class="pwd-login-left"><input type="checkbox"><span>下次自动登录</span></a>
                <a href="#" class="pwd-login-right"><span>忘记密码?</span></a>
            </div>
            <div class="login">
                <button>登录</button>
            </div>
            <div class="reg">
                还没账号？<a href="#">马上注册</a>
            </div>
        </div>
        <!--面板的底部-->
        <div class="panel-footer">
            <span>社交账号登录</span>
            <img src="images/sina.png">
            <img src="images/weixin.png">
            <img src="images/qq.png">
        </div>
    </div>
</body>
</html>

搭建好基本骨架后，需要进行布局和装修~

下面是CSS文件:

a, body, title, header, span, div, p, label, img, input, button, img{
    padding: 0px;
    margin: 0px;
}

body {
    background: #F2F2F2;
    text-align: center;
}

/*面板*/
#panel {
    display: inline-block;
    margin-top: 100px;
    background: white;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 6px #999;
    width: 260px;
}

/*面板头部*/
#panel .panel-top {
    font-size: 13px;
    font-family: Arial;
    padding: 5px 0px;
    border-bottom: 1px solid #ddd;
    margin: 0 auto;
}

/*面板内容*/
#panel .panel-content{
    margin-top: 20px;
}

#panel .panel-content .int {
    margin-bottom: 9px;
    height: 36px;
    position: relative;
}

#panel .panel-content .int label {
    position: absolute;
    top: 7px;
    left: 6px;
}

#panel .panel-content .int input {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    padding-left: 38px;
    box-sizing: border-box;
    border-radius: 5px;
}

#panel .panel-content .int input:focus {
    outline: none;
    border: 1px solid orangered;
    box-shadow: 0 0 2px orangered;
}

#panel .panel-content .pwd-login a {
    color: gray;
    font-size: 13px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #999;
}

#panel .panel-content .pwd-login a.pwd-login-right {
    float: right;
}

#panel .panel-content .pwd-login a.pwd-login-left{
    float: left;
}

#panel .panel-content .pwd-login a.pwd-login-left input{
    margin-right: 3px;
}

#panel .panel-content .login button {
    width: 100%;
    height: 33px;
    border: 0;
    color: white;
    font-size: 17px;
    margin-bottom: 10px;
    border-radius: 5px;
    background: orange;
}


#panel .panel-content .reg {
    /*background: red;*/
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

#panel .panel-content .reg a {
    color: orange;
    text-decoration: none;
    margin-left: 3px;
}


/*面板底部*/
#panel .panel-footer {
    height: 30px;
    line-height: 30px;
    text-align: center;
}


#panel .panel-footer img{
    width: 30px;
    vertical-align: middle;
}

OK~ 搞定，下面看效果图：

具体的Demo，请移步传送门。记住一定要多多练习。

kidd风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS转前端之仿写登录页面

今天还是来仿写一个常用的登录界面，巩固一下之前掌握的知识。同样的我们还是先构建一个项目，创建对应的css文件和html文件，then begin code~首先是html：欢迎登录欢迎登录CSDN官网
复制链接

扫一扫

专栏目录