zoukankan html css js c++ java

登录界面

<!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

查看全文

相关阅读:
win10安装jmeter配置环境路径
 genymotion在mac上的安装
 jmeter的启动
 win10的cmd输入javac的问题
 01 | 你真的懂测试吗？从“用户登录”测试谈起茹炳晟
 冒烟测试
 软件测试基础知识
 红队指南--第3章列举
 REDTEAM 指南---第四章外部侦察
 Red Team 指南-第1章红队和红队概述

原文地址：https://www.cnblogs.com/1234ply/p/10588936.html