【下载文档:  css 表单效果.txt 】

---

css 表单效果
by 阿会楠 2008-12-4
//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";
}
}
*{
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;
}
欢迎您注册玩具购会员！
确认服务条款
选择用户名
选择用户类型
填写详细资料
用户名
密码
确认密码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]