2019-10-27 登录页

作者: 独造之域 | 来源:发表于2019-10-28 21:58 被阅读0次

2019-10-27 登录页
iTunes Connect 到 App Store Conne
Axure实例——主流登录/注册原型
关于APP 登录页
flutter app整体框架结构的思考
设计登录页
layui登录页
6、登录页
vue登录页
vue登录页

前端设计与开发

这几天有空所以记录一下自己写的登录界面。主要涉及到div 元素的居中以及一些 padding 和margin 的应用。而切换动作使用的是Jquery 的slideToggle()方法。整体上注册和登录都再同一个界面上。
学到的新的知识是如何让input 元素中的内容居中，就是给padding ，输入框变大和边框的同时输入内容也会再中间，而不是通过width 和 height 设置其宽高，再调整文字居中，这种方式。

image.png

1、登录页图片

2、代码

html 代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body:before {
            position: fixed;
        }

        .center div {
            margin: 0 auto;

        }

        .center {

        }

        .top {
            display: flex; /*弹性布局*/
            align-items: center;
            justify-content: center;
        }
        .top_title h1{
            font-weight:300   /*字体粗细*/
        }
        .input_text {
            width: 100%;
            border-radius: 5px;
            margin-bottom: 15px;
            background: #f1f1f1;
            padding: 13px;
            border: 0px solid transparent;
        }

        .center_img {
            border-radius: 100%;
            background-color:#ee3b3a;
            display: flex; /*弹性布局*/
            align-items: center;
            justify-content: center;
        }

        .center_form_log form p {
            font-size: 12px;
        }
        .center_form_res form p {
            font-size: 12px;
        }
    </style>

    <script src="/static/jquery-easyui-1.7.0/jquery.min.js"></script>
</head>
<body style="background-color:#08ffc8 ">
<div class="contain" style="height:100%;background-color: #08ffc8">
    <div class="top" style="height:150px">
        <div class="top_title" style="width: 350px;height:50px;text-align:center">
            <h1>System login</h1>
        </div>
    </div>
    <div class="center" style="">
        <div style="width: 350px;  height: auto;padding-bottom: 20px;padding-top:30px;background-color: #fdfdfe">
            <div class="center_img" style="width: 150px;height: 150px;margin-bottom: 30px">
                <img src="/static/img/login.png" style="vertical-align:baseline">
            </div>
            <div class="center_form_log" style="text-align: center;width:80%;">
                <form action="/toLogin" method="get">
                    <input class="input_text" name="username" type="text" placeholder="username" style="box-sizing: border-box">
                    <input class="input_text" name="password" type="password" placeholder="password" style="box-sizing: border-box">
                    <input class="input_text btn_login" type="button" onclick="alert()" style="background-color: #ee3b3a;color: #fdfdfe;"
                           value="Login in">
                    <p>Not registered?<a style="color:red">create a new account</a></p>
                </form>
            </div>
            <div class="center_form_res" style="text-align: center;width:80%;display: none;">
                <form action="/toRegister" method="get">
                    <input class="input_text" type="text" placeholder="username" style="box-sizing: border-box">
                    <input class="input_text" type="password" placeholder="password" style="box-sizing: border-box">
                    <input class="input_text" type="email" placeholder="email address"
                           style="box-sizing: border-box">
                    <input class="input_text" type="button" onclick="alert()" style="background-color: #ee3b3a;color: #fdfdfe;"
                           value="create">
                    <p>have account!<a style="color:red">go back to login</a></p>
                </form>
            </div>
        </div>
    </div>
    <!--<div class="bottom" style="background-color:#204969"></div>-->
</div>
</body>
<script src="/static/js/login.js">
</script>
</html>

css 代码 common.css

* {
    margin: 0;
    padding: 0;
}

.center {
    position: absolute;
    width: 98%;
    top: 65px;
    left: 1%;
    right: 40px;
    bottom: 100px;
}

.divbox {
    position: absolute;
    top: 5px;
    border-bottom: 1px solid #57BE85;
    border-left: 1px solid #57BE85;
    border-right: 1px solid #57BE85;
}

.box_content{
    position: absolute;
    top: 30px;
    width: 100%;
}
.box {
    position: absolute;
    /*bottom: 0px;*/
    width: 45.5%;
}

.title {
    height: 30px;
    width: 100%;
    position: absolute;
    top: 0px;
    padding-left: 5px;
    color: #D87575;
    //border-top:  1px solid #0e0e0e;
    //border-bottom: 1px solid #0e0e0e;
    background-color: #7BCED7;
}

js代码 login.js

$(function(){
    $(".center_form_res form p a").click(logAction);
    $(".center_form_log form p a").click(logAction);
    $(".btn_login").click(isLogin);
    $(".btn_register").click(isRegister);
})

function logAction(){
    $(".center_form_log").slideToggle();
    $(".center_form_res").slideToggle();
}

// 登录提交
function isLogin()
{
   $(".center_form_log form").submit();
}
// 注册提交
function isRegister(){

}


function alert(){
    alert("hi barry");
}