本篇文章主要介绍如何使用p+css实现表单效果，纯p+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 p{ padding-top:3px; }
欢迎您注册玩具购会员！
- 用户名
-
立即学习“前端免费学习笔记（深入）”；
- 密码
立即学习“前端免费学习笔记（深入）”；
- 确认密码
立即学习“前端免费学习笔记（深入）”；
相关推荐：
p css表单布局的五个小技巧_html/css_WEB-ITnose
DIV+CSS表单布局的五个小技巧_html/css_WEB-ITnose
thinkphp表单上传文件并将文件路径保存到数据库中
以上就是css 编写表单效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609889.html
微信扫一扫 
支付宝扫一扫 
