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

  • 相关阅读:
    yum安装8.0mysql数据库
    free命令详细介绍
    linux 自定义美女欢迎界面
    shll脚本常用格式和规则使用
    liunx常用知识基本命令大全
    liunx系统二进制包安装编译mysql数据库
    CentOS7更改网卡名称
    老男孩教育100道面试题
    非关系型数据库(NoSQL)
    iptables
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/3727051.html
Copyright © 2011-2022 走看看