html div 表单,css 表单效果，纯div+css实现

纯div+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;

}

欢迎您注册玩具购会员！

• 确认服务条款
• 选择用户名
• 选择用户类型
• 填写详细资料

用户名

密码

确认密码

举报/反馈