css编写表单效果

2020-11-27 来源：汇智旅游网
本篇文章主要介绍如何使用p+css实现表单效果，纯p+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> 
<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 p{ 
 padding-top:3px; 
} 
</style> 
</head> 

<body> 
<p id="reg"> 
<h6>欢迎您注册玩具购会员！</h6> 
<p 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> 
</p> 
<p id="content"> 
<form> 
<dl> 
 <dt>用户名</dt> 
<dd><p><input type="text" /></p></dd> 
<dt>密码</dt> 
<dd><p><input type="text" /></p></dd> 
<dt>确认密码</dt> 
<dd><p><input type="text" /></p></dd> 
<dt></dt> 
<dd><input type="button" value="注册" /></dd> 
</dl> 
 </form> 
</p> 
</p> 
</body> 
</html>
全部栏目

css编写表单效果
