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

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 
 ><div>
<label for="name">姓名:</label>
<input name="name" type="text"  />
</div><div><label for="pass">密码:</label>
<input name="pass" type="password"  /></div>
</div><div >
<input type="submit" name="Submit" value="OK" /></div>
<div class="centerm"><a href="#">忘记密码</a>
<a href="#">新用户注册</a></div></form></div>

相关文章:

  • 2021-06-22
  • 2022-02-14
  • 2021-10-11
  • 2021-09-19
  • 2021-10-16
  • 2022-01-29
  • 2022-03-02
猜你喜欢
  • 2021-10-19
  • 2021-07-01
  • 2022-12-23
相关资源
相似解决方案