css 表单效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2Fjs%E8%BE%85%E5%8A%A9%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0A%20%20%20%20var%20initleft%20%3D%20200%3B%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AE%9A%E4%BD%8D%20%0D%0A%20%20%20%20var%20lis%20%3D%20document.getElementById(%22menu%22).getElementsByTagName(%22li%22)%3B%20%0D%0A%20%20%20%20for(var%20i%20%3D%200%3Bi%20%3C%20lis.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20lis%5Bi%5D.style.left%20%3D%20initleft%20%2B%20i*100%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<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> 
<div id="reg"> 
<h6>欢迎您注册玩具购会员！</h6> 
<div id="menubox"> 
<ul id="menu"> 
<li style="left:200px;">确认服务条款</li> 
<li class="current" style="left:300px;">选择用户名</li> 
<li style="left:400px;">选择用户类型</li> 
<li style="left:500px;">填写详细资料</li> 
</ul> 
</div> 
 
<form> 
<dl> 
    <dt>用户名</dt> 
<dd><div><input type="text" /></div></dd> 
<dt>密码</dt> 
<dd><div><input type="text" /></div></dd> 
<dt>确认密码</dt> 
<dd><div><input type="text" /></div></dd> 
<dt></dt> 
<dd><input type="button" value="注册" /></dd> 
</dl> 
    </form> 
</div> 
</div> 
</body> 
</html>

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

教程首页更多教程