zoukankan      html  css  js  c++  java
  • 刚开始学习CSS基础,仿做了个京东的登录页面,还不错

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    .d0{
        position: relative;
         300px;
        left: 470px;
        margin: 10px 0 0;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        height: 6px;
    }
    .url{
        border: 1px solid red;
         1920px;
        height: 476px;
        background-image:url("https:img13.360buyimg.com/da/jfs/t2749/276/1020747574/33213/870500f1/5731485aN1134b4f0.png");
        background-size: contain;
    }
    .d2{
        background-color:#000;
        margin: 80px;
    }
    .d3{
         260px;
        height: 25px;
        background-color: #ffe57d;
        font-size: 15px;
    }
    .met
    {
        display: inline-block;
        display: block;
         306px;
        overflow: visible;
        height: 27px;
    }


    .we{
        position: relative;
        height: 27px;
        right: 83px;
        line-height: 27px;
        top: -3px;
        float: left;
        color: #6A87C0;

    }
    .d4{
        position: relative;
        height: 27px;
        right: 20px;
        line-height: 27px;
        top: -3px;
        float: right;
    }
    .mima{
        position: relative;
        height: 27px;
        right: 20px;
        line-height: 27px;
        top: -2px;
        float: right;
    }
    .d6{
        background-color: #E4393C;
         250px;
        height: 39px;
        color: #fff;
        font-size: 20px;
    }
    .d7{
        font-size: 10px;
        color: #999999
    }
    .d8{
        font-size: 14px;
        color: #666666;
    }
    </style>
    </head>

    <body>
    <div class="d0"> <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" ><img src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png" ></div><br><br><br>
    <div class="url">
      <div class="d2">
    <form>
    <table border="1" bgcolor="#fff" width="300px" height="360px" cellspacing="0" cellpadding="11" align="right">
    <tr valign="top">
    <td>
    <ol class=" me"><dir>
    <b class="we">京东会员</b>
    <b class="d4" ><a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" target="_blank" >>立即注册</a></b>
    </dir><br>
    </ol>
    <div class="d3" >公共场所禁止自动登录,以防账号丢失 </div><br>
    <div>用户名<input type="text" name="" placeholder="邮箱/用户名/已验证手机"></div><br>
    <div>密 码 <input type="password" name="" tabindex="2" placeholder="密码" ></div><br>
    <input type="radio" name="gender" value="" class="d5">自动登录
    <b class="mima" align="right"><a href="https://safe.jd.com/findPwd/index.action" target="_blank">忘记密码?</a></b><br><br>
    <div >
    <input class="d6" type="button" name="" value="登&nbsp&nbsp录">
    </div><br>
    <div class="d7">使用合作网站账号登录京东:</div><br>
    <div class="d8">京东钱包&nbsp|&nbspQQ&nbsp|&nbsp微信</div>
    </td>
    </tr>
    </div>
    </div>

    </table>
    </form>
    </body>
    </html>

  • 相关阅读:
    算法导论--平摊分析之聚集分析
    编译器开发系列--Ocelot语言3.类型名称的消解
    编译器开发系列--Ocelot语言2.变量引用的消解
    编译器开发系列--Ocelot语言1.抽象语法树
    算法导论--散列表的数学分析(精解)链表法
    Linux2.6内核协议栈系列--TCP协议2.接收
    日常‘说说’(回归 原森雨)
    那些玩枪战我特别想听到的声音!
    友链!
    晚安背后的秘密
  • 原文地址:https://www.cnblogs.com/LavenderZ/p/5630327.html
Copyright © 2011-2022 走看看