使用 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;width:30px;height:20px;}
.info dd input { margin-top:2px;vertical-align:middle;} 进行大小以及水平居中设置
.contrainer {text-align:left; width:300px;height:auto;}
.main { text-align:center;margin:0 auto;background-image:url("demo.png");width:300px;height:300px;}
.info .btnok{text-align:center;width: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 中测试通过