学步园

这个登陆表单主要采用相对和绝对定位来制作，这样做的好处是不会因游览器的不同而产生错位现象，预览最终效果>>，代码如下。

CSS代码：

label{
	color: #666666;
	width: 40px;
	float: left;
}

.centerm{
	padding: 58px 0px 5px;
	text-align: center;
}

#memberbg{
	background: #FFF url(tour/memberbg.gif);
	border: solid 1px #CCC;
	text-align: left;
	width: 190px;
	margin: 0px auto;
	padding:1px;	
}

#memberform{
	margin: 0px;
	position: relative; /*--相对表单定位--*/
}

#np{
	left: 10px; /*--离表单左边距离--*/
	position: absolute; /*--绝对定位--*/
	top: 10px; /*--离表单顶部距离--*/
	width: 170px;
}

#np div{
	margin-bottom:2px;
}

#np input{
	background: #FFFFFF;
	border: 1px solid #CCC;
	color: #666666;
	font-size: 12px;
	width: 80px;
	mardin: 0px;	
}

#send{
	left: 142px;
	position: absolute;
	top: 10px;
	width: 44px;
}

#send input{
	background: #F1F1F1;
	border: 1px solid #CCC;
	font-weight: bold;
	height: 40px;
	width: 40px;
}

<div id="memberbg"><form name="form1"
 id="memberform" method="post" action="#"><div id="np"><div>
<label for="name">姓名：</label>
<input name="name" type="text" id="name" maxlength="12" />
</div><div><label for="pass">密码：</label>
<input name="pass" type="password" id="pass" maxlength="12" /></div>
</div><div id="send">
<input type="submit" name="Submit" value="OK" /></div>
<div class="centerm"><a href="#">忘记密码</a>
<a href="#">新用户注册</a></div></form></div>