• 使用 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 中测试通过

  • 相关阅读:
    日♂常
    日♂常
    生哥的hu测
    生哥的hu测
    118.编程实现添加环境变量
    4.泡妞与设计模式(五) 原型模式
    4.泡妞与设计模式(四)享元模式
    2.泡妞与设计模式(三) 外观模式
    1.泡妞与设计模式(二)合成模式
    0.泡妞与设计模式(一)工厂模式
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/3727051.html
Copyright © 2020-2023  润新知