您现在的位置是：网站首页> 编程资料编程资料

css 表单效果_经验交流_

2023-05-25 183人已围观

简介 css 表单效果_经验交流_

<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 div{ padding-top:3px; } </style><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><div id="content"><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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：IE6不能正常解析CSS文件问题的解决方法及原因分析_经验交流_

下一篇：div+css模拟表格效果代码_经验交流_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网