登录界面

Posted 2021-02-14 1234ply

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了登录界面相关的知识，希望对你有一定的参考价值。

技术图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>电子邮件登录</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="heading">
            <div class="heading_middle">
                <img src="login_logo.png"/>
                <a href="#">帮助</a>
            </div>
        </div>
        <div class="content">
            <div class="content_main">
                <div class="loginbox">
                    <div class="boxhead">
                        <img src="boxhead.png"/>
                    </div>
                    <div class="boxbody">
                        <div class="boxbody_main">
                            用户登录
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" placeholder="用户名">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" placeholder="密码">
                                    </td>
                                </tr>
                            </table>
                            <font>学生选择@stu.swpu.edu.cn</font>
                            <a href="#">忘记密码</a>
                            <br/>
                            <input type="submit" value="登 录" id="login">
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_bottom">
                <br/>
                <font>西南石油大学</font>
            </div>
        </div>
    </body>
</html>

html

html

*{
    margin: 0px;
    padding: 0px;
}

.heading{
    width: 100%;
    background-color: #f5f5f5;
    height: 76px;
}

.heading_middle{
    width: 964px;
    margin: 0px auto;
}

.heading_middle img{
    padding-top: 10px;
}

.heading_middle a{
    float: right;
    padding-top: 20px;
}

a link,a hover{
    text-decoration: none;
}

.content{
    width: 964px;
    height: 534px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.content_main{
    width: 100%;
    height: 460px;
    background-image: url("loginBg.jpg");
}

.loginbox{
    height: 344px;
    width: 376px;
    position: absolute;
    right: 525px;
    top: 135px;
    left: auto;
    background-color: white;
}

.content_bottom{
    width: 100%;
    height: 74px;
    background-color: #f5f5f5;
    text-align: center;
}

.boxbody{
    height: 299px;
    width: 100%;
}
.boxbody_main{
    width: 80%;
    height: 80%;
    margin: 20px auto;
}

.boxbody_main table{
    width: 100%;
    height: 100px;
}

.boxbody_main table td{
    padding-top: 15px;
    padding-bottom: 15px;
}

.boxbody_main table input{
    width: 100%;
    height: 30px;
    font-size: 20px;
    border-radius: 5px;
}

.boxbody_main font{
    color: red;
    font-size: 14px;
}
.boxbody_main a{
    position: relative;
    left: 55px;
}
a:visited,a:link{
    text-decoration: none;
    color: darkgray;
}
a:hover{
    color: black;
    text-decoration:underline;
}

#login{
    font-size: 18px;
    float: right;
    margin-top: 20px;
    width: 142px;
    height: 38px;
    color: #fff;
    background-image: url(login_btn.jpg);
    border-radius: 5px;
}

.content_bottom{
    color: #999;
    font-size: 14px;
}

css

css

以上是关于登录界面的主要内容，如果未能解决你的问题，请参考以下文章

pbootcms对接微信扫码登录代码核心片段和步骤（前后端）

微信小程序代码片段

从片段调用 Google Play 游戏服务

Android开发常用代码片段

EasyClick 运行代码片段出Null