首页 > 文章 > web前端 > css 表单效果_经验交流

css 表单效果_经验交流

WBOY原创: 2016-05-16 12:04:091488浏览

<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>

<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需刷新才能执行

]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：标准布局常见问题及解决办法_经验交流下一篇：firefox下rowspan+border+border-collapse的bug_经验交流

相关文章

查看更多