css 表单效果

更新时间：2008年12月06日 10:31:29 作者：

纯div+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 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> <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> </body> </html>

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

ie6 注释引起的问题
大部分是由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
2008-12-12
CSS文字截取功能实现代码
用css来实现自动截取文字，不需要后台程序和JS的使用。
2008-06-06
css教程 css和document
页面与css之间的联系，老手和新手都需要了解
2008-08-08
用css实现的带阴影的表格效果的代码
用css实现的带阴影的表格效果的代码...
2007-11-11
css强制换行 css强制不换行的css方法
更多的关于css强制换行 css强制不换行的css方法可以参考本站的内容页的文章控制.
2007-12-12
CSS中几种常见的注释
CSS中几种常见的注释...
2007-05-05
div+css在思路和流程上实现结构与表现的分离分析
内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div+css xhtml+css 纯代码的分离，思想上流程上，到底如何分离？
2008-08-08
布局用CSS+DIV的优点总结
布局用CSS+DIV的优点总结...
2007-08-08
Firefox返回时Iframe的显示Bug的解决方法
一个页面有4个Iframe来显示flash内容，其中第二个iframe的显示是用Javascript控制的，只有当特定的cookie存在时才出现，否则显示普通的文本。
2008-05-05
CSS样式表常用小技巧收藏
CSS样式表常用小技巧收藏...
2007-03-03

css 表单效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具