前端静态信息登陆页面

最新推荐文章于 2023-03-02 08:14:41 发布

武琦同学

最新推荐文章于 2023-03-02 08:14:41 发布

阅读量1.4k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52174868/article/details/124342758

版权

<!doctype html>
<html lang = "zh">
    <head>
        <meta charset = "UTF-8">
        <mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'></mate>
        <meta name = "keywords" content = "教务管理系统登陆界面">
        <title>教学管理信息服务平台</title>
        <style>
            .box1{
                margin-top: 50px;
                margin-left: 200px;
                display: flex;
                align-items: center;
                /*justify-content: center;*/
            }
            .one{
                height: 50px;
                margin-right: 10px;
            }
            .dog{
                color: rgb(41,121,185);
                font-size: 25px;
            }
            .box2{
                background-color:rgb(245,245,245);
                height: 500px;
                margin: 50px 200px 50px 200px;
                display: flex;
                align-items: center;
            }
            .two{
                margin-left: 30px;
                height: 440px;
                width: 750px;
            }
            .cat{
                color: rgb(41,121,185);
                background-color:rgb(252,252,252);
                font-size: 20px;
                margin: 30px;
                height: 440px;
                width: 100%;
                line-height: 30px;
            }
            h3{
                text-align: center;
            }
            form{
                line-height: 10px;
                margin-top: 20px;
                margin-left: 20px;
            }
            .erweima{
                margin-top: 10px;
                font-size: 10px;
                text-align: center;
            }
            .three{
                display: block;
                margin: auto;
                height: 80px;
            }
            .denglu{
                text-align: center;
                margin: 20px;
            }
            button{
                background-color:rgb(245,245,245);
                width: 50%;             
            }
            a{
                color: rgb(41,121,185);
                font-size: 10px;
                margin-left: 15px;
            }
            .box3{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <img class="one" src="./photo/logo_jw_d.png">
            <span class="dog">教学管理信息服务平台</span>
        </div>
        <div class="box2">
            <img class="two" src="./photo/R-C.jpg">
            <div class="cat">
                <h3>用户登录</h3>
                <form>
                    <p>用户名</p>
                    <input placeholder="请输入账号">
                    <p>密码</p>
                    <input placeholder="请输入密码">                    
                </form>
                <p class="erweima">二维码登录</p>                
                    <img class="three" src="./photo/QQ图片20220422001113.png">
                <div class="denglu">
                    <button type="button">登录</button> 
                </div>
                <a href="./忘记密码.html">忘记密码</a>
            </div>
        </div>
        <div class="box3">版权</div>
    </body>
</html>