zoukankan      html  css  js  c++  java
  • 使用 dl 设计的简单的登陆界面 (为了记录)

    先贴图

    对应的地方放置 一些登陆的图片即可

    html 代码如下:

    <html>
    <head>
    <style>
    body {text-align:center;margin:0 auto;} // 进行居中出咯
    .info  dt {padding:0px; margin-left:0px; }     // 进行浏览器解析统一
    .info  dd { padding:0px; margin:0px; margin-top:2px; vertical-align:middle; margin-bottom:30px;}

    .info dd img { margin-top:2px;vertical-align:middle;30px;height:20px;}
    .info dd input { margin-top:2px;vertical-align:middle;} 进行大小以及水平居中设置
    .contrainer {text-align:left;  300px;height:auto;}
    .main { text-align:center;margin:0 auto;background-image:url("demo.png");300px;height:300px;}
    .info .btnok{text-align:center;193px;height:30px;}  登陆图片设置

    .info dd .ok{margin-left:-130px; } // 登陆文字的位置定位

    </style>
    </head>
    <body>
    <div class="main">

    <div class="contrainer">

    <dl class="info">
    <dt>
    user login Demo
    </dt>
    <dd>
    <span ><img src="" /> <input type="text" /> </span>
    </dd>
    <dd>
    <span ><img src="" /> <input type="text" /> </span>
    </dd>
    <dd>
    <span ><img class="btnok" src="" /> <span class="ok">login in </span> </span></dd>
    </dl>
    <div>
    </div>
    </body>

    </html>

    以上代码子IE 5. 以及IE 6 ,7 中测试通过

  • 相关阅读:
    9.8
    9.6
    9.5
    树状数组
    逆序对
    tab标签切换(无炫效果,简单的显示隐藏)
    JQuery 的选择器
    简单的JQuery top返回顶部
    Hello Word!
    java Data 计算自己活了多少天
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/3727051.html
Copyright © 2011-2022 走看看