This article mainly introduces how to use p css to achieve form effects, pure p css implementation, you can refer to it.
The code is as follows:
<!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>
Related recommendations:
p Five tips for css form layout_html/css_WEB-ITnose
DIV Five tips for css form layout_html/css_WEB-ITnose
thinkphp form uploads files and saves the file path to the database
The above is the detailed content of css writing form effect. For more information, please follow other related articles on the PHP Chinese website!