My first code--login interface

来源：互联网发布：如何催乙方进度知乎编辑：程序博客网时间：2024/06/11 14:46

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%的原创，卡壳了我会上网搜和查书

阅读全文

0 0