My first code--login interface

judy_hope123

于 2017-09-25 17:42:32 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/judy_hope123/article/details/78087714

版权

2017-09-08

照着我看的书，敲了几个例子。这是一本进阶的书，一边看一边有很多疑问，但是不觉间有了一个整体的统观。

以下是我的第一个小任务--登录界面

先上图：

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link href="css/index.css" rel="stylesheet">
        <style>
            body {
                margin: 0;
                padding: 0;
                width: auto;
            }
            
            h2 {
                text-align:center;
                line-height:400px;
                 /*{text-align:justify;}*/
            }
            
            div {
                border: 1px solid #a1a1a1;
                border-radius: 25px;
                padding: 25px 40px;
                width: 100px;
                height: 200px;
            }
            
            div.wrap {
                width: 300px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -100px 0 0 -150px
            }
            
            /*.title {
                width: 60px;
                height: 22px;
                line-height: 22px;
                float: left;
                text-align: justify;
                text-justify: inter-ideograph; /*为了兼容IE*/
                text-align-last: justify;/* ie9*/
                -moz-text-align-last: justify;/*ff*/
                -webkit-text-align-last: justify;/*chrome 20+*/
            }
            
            .title:after {
                content: ".";
                display: inline-block;
                width: 100%;
                overflow: hidden;
                height: 0;
            }
            
            .maohao {
                line-height: 22px;
                width: 10px;
                float: left;
            }
            
            .detail {
                float: left;
                width: 220px;
                line-height: 22px;
                white-space: pre-wrap;
                word-break: break-all;
            }
            
            #justify {
                width: 300px;
                height: auto;
                font-size: 13px;*/
            }
        </style>
    </head>

    <body>
        <h2>至于信者</h2>
        
        
        
        <div class="wrap">

            <p>用 户 名 :<input type="text" placeholder="你的手机号/用户名"></p>

            <p>密 码 :<input type="password" placeholder="输入密码"></p>
            <button>登录</button>

            <a href="#" class="auto-login"> <input type="checkbox">记住密码 </a>

        </div>

    </body>

</html>

不是100%的原创，卡壳了我会上网搜和查书

judy_hope123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
My first code--login interface

2017-09-08照着我看的书，敲了几个例子。这是一本进阶的书，一边看一边有很多疑问，但是不觉间有了一个整体的统观。以下是我的第一个小任务--登录界面先上图：登录 body { margin: 0; p
复制链接

扫一扫