css 表单效果

网络编程发布日期：2025/1/10 浏览次数：1

正在浏览：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>  <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>  <h6>欢迎您注册玩具购会员！</h6>  <ul id="menu"> <li>确认服务条款</li> <li>选择用户名</li> <li>选择用户类型</li> <li>填写详细资料</li> </ul>      </body> </html>

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

上一篇：div+css模拟表格效果代码

下一篇：IE6不能正常解析CSS文件问题的解决方法及原因分析