css表单效果_经验交流

来源：智榕旅游

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>by 阿会楠 2008-12-4</title> 
<script language="javascript" type="text/javascript"> 
//js辅助 
window.onload = function(){ 
 var initleft = 200;// 初始化第一个定位 
 var lis = document.getElementById("menu").getElementsByTagName("li"); 
 for(var i = 0;i < lis.length;i++){ 
 lis[i].style.left = initleft + i*100 + "px"; 
 } 
 
} 
</ script> 
<style type="text/css"> 
*{ 
 font-size:12px; 
 padding:0; 
 margin:0; 
} 
body{ 
 text-align:center; 
} 
#reg{ 
 margin:0 auto; 
 width:600px; 
 background:#cccccc; 
 height:500px; 
} 
h6{ 
 background:black; 
 height:28px; 
 color:white; 
 text-align:left; 
 line-height:28px; 
 padding-left:3px; 
} 
#menu{ 
 height:30px; 
 text-align:left; 
 padding-top:15px; 
 padding-left:10px; 
 overflow:hidden; 
} 
li{ 
 list-style-type:none; 
} 
#menu li{ 
 
 float:left; 
 color:green; 
 height:30px; 
 padding:0 5px; 
 line-height:30px; 
 margin-left:20px; 
 position:absolute; 
} 
.current{ 
 border:1px solid blue; 
 border-bottom:0; 
 background:white; 
} 
#content{ 
 border:1px solid blue; 
 height:400px; 
 margin:8px; 
 margin-top:0; 
 background:white; 
 padding:10px; 
 
} 
#content dl{ 
 border-top:1px solid #ccc; 
 border-left:1px solid #ccc; 
 width:560px; 
 height:116px; 
} 
#content dl dd,#content dl dt{ 
 border-right:1px solid #cccccc; 
 border-bottom:1px solid #cccccc; 
 height:28px; 
} 
#content dl dt{ 
 width:200px; 
 float:left; 
 text-align:right; 
 padding-right:3px; 
 background:#F0F0F0; 
 line-height:28px; 
} 
#content dl dd{ 
 width:352px; 
 float:left; 
 text-align:left; 
 padding-left:3px; 
} 
/*兼容ie 6.0*/ 
#content dl dd div{ 
 padding-top:3px; 
} 
</style> 
</head>

<body> 
 
<h6>欢迎您注册玩具购会员！</h6> 
 
 
<li style="left:200px;">确认服务条款</li> 
<li class="current" style="left:300px;">选择用户名</li> 
<li style="left:400px;">选择用户类型</li> 
<li style="left:500px;">填写详细资料</li> 
 
 
 
 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]