zoukankan      html  css  js  c++  java
  • 仿 豆瓣注册页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="zh-CH">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎加入豆瓣</title>
    <link rel="shortcut icon" type="image/x-icon" href="../HTML图片/u=517497324,1050730652&fm=26&gp=0.ico" >
    <style type="text/css">

    .GlobalPhone {
    vertical-align: middle;
    display: inline-block;
    }


    .GlobalPhone{
    display:table;
    padding:0;
    height:28px;
    210px;
    font-size:0;
    position:relative;
    }

    .GlobalPhone>span{
    text-align:center;
    padding:0 7px;
    cursor:pointer;
    color:#494949;
    white-space:nowrap;
    }


    .GlobalPhone>span,.GlobalPhone input{
    line-height:28px;
    }


    .GlobalPhone>*{
    font-size:14px;
    display:table-cell;
    vertical-align:top;
    }


    .GlobalPhone>span:after{
    content:"";
    display:inline-block;
    height:15px;
    border-right:1px solid #ccc;
    vertical-align:middle;
    margin-left:7px;
    }


    #request-phone-code-btn{
    cursor:pointer;
    background:#fff;
    border:1px solid #c9c9c9;
    font-size:13px;
    padding:6px 15px;
    border-radius:3px;
    vertical-align:middle;
    -webkit-border-radius:3px;
    }

    .item {
    clear:both;

    }


    em{
    font-style:normal;
    }

    a:link{
    color:#369;
    text-decoration:none;
    }

    .loc {
    font-size: 12px;
    line-height: 30px;
    }


    input:focus {
    border-color:#000 !important;
    outline: 0;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
    }


    .basic-input {
    200px;
    height:18px;
    padding:5px;
    border-radius:3px;
    border:1px solid #333;
    font-size:14px;
    background-color:transparent;
    }


    label {
    display:inline-block;
    float:left;
    margin-right:15px;
    text-align:right;
    60px;
    font-size:14px;
    line-height:30px;
    vertical-align:middle;
    }

    .tips, #location{
    font-size:12px;
    color:#808080;
    }
    .suggestion {
    padding-left:75px;
    }


    .enable{
    color:#ffffff;
    background:#3fa156;
    border:1px solid #063;
    }
    .btn-submit{
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    padding:6px 26px;
    border-radius:3px;
    }

    input,button.textarea,select{
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    }

    </style>
    </head>

    <body>
    <img src="../HTML图片/lg_account.png" />
    <br />

    <h2>欢迎加入豆瓣</h2>

    <div class="item extra-tips">
    <label for="Email">邮箱</label>
    <input type="text" id="email" placeholder="请输入邮箱" class="basic-input"
    maxlength="60" tabindex="1" value/>
    </div>


    <div >
    <label for="Email">密码</label>
    <input type="text" id="password" placeholder="请输入密码" class="basic-input"/>
    </div>


    <div >
    <label for="Email">名号</label>
    <input type="text" id="name" class="basic-input" />
    </div>


    <div class="suggestion">
    <span class="tips">第一印象很重要,起个响亮的名号吧</span>

    </div>


    <div class="item loc-item">
    <label>常居地</label>
    <span class="loc">
    <em id="location">
    豆瓣猜你在
    <strong>成都</strong>
    ,没猜对?
    </em>
    <a href="#" class="a-btn-location" id="edloc">手动选择</a>
    </span>
    </div>



    <div class="item extra-tips">
    <label for="verify_phone_num">手机号</label>
    <div class="basic-input GlobalPhone" >
    <span class="js-choose-district" data-abbr="CN">
    +86
    </span>
    <div >
    <input id="verify_phone_num" type="text" class="basic-input" maxlength="60" value tabindex="1" />
    <input id="verify_phone" name="verify_phone" type="hidden"
    value />
    </div>`
    </div>
    </div>

    <div class="suggestion">
    <span class="tips">
    用手机接收注册验证码
    <br />

    验证的手机号如果没有绑定过账号。会自动绑定当前账号
    </span>
    </div>

    <div class="item-caption-item">
    <label>验证码</label>
    <input id="code" name="code" type="text" class="basic-input small" maxlength="10" tabindex="2" />
    <input id="request-phone-code-btn" type="submit" value="获取验证码" />
    <span id="tips-error" class="tips">
    <em></em>

    </span>
    <span id="tips-info" class="tips"></span>
    <span class="validate-error" id="frm_error"></span>
    </div>



    <div class="item-submit">
    <label>&nbsp;</label>
    <input type="submit" name="register" value="注册" id="button" class="btn-submit enable" tabindex="6" title="阅读并同意《使用协议》方可注册"
    />
    </div>

    <style>
    div {

    300px;
    border: 10px solid white;
    padding: 0px;
    margin: 0px;
    }
    </style>


    </body>
    </html>

    手打。

  • 相关阅读:
    手贱!使用django,在数据库直接删除了表
    js中在一个函数中引用另一个函数中的函数,可以这么做
    上传下载文件方式
    阻止form提交数据,通过ajax等上传数据
    一种思路,隐藏input标签,通过label关联
    java 寻找水仙花数
    java 统计素数个数问题
    java 兔子生仔问题
    java 实现读取某个目录下指定类型的文件
    通过java 来实现对多个文件的内容合并到一个文件中
  • 原文地址:https://www.cnblogs.com/yitaqiotouto/p/9658012.html
Copyright © 2011-2022 走看看