Maison > Article > interface Web > 求网页设计高手帮我看看,要实现图中框里面的那个样子,该怎么弄,代码如下。_html/css_WEB-ITnose
<div class="wrapper"><p>账户信息</p><hr> <form id="signupForm" method="post" action="" class="zcform"> <p class="clearfix"> <label class="one" for="telphone">用户类型:</label> <label><input type="radio" name="user" value="Individual user" checked="checked" style="width:20px;margin-top:18%;color:#ffffff;"/><b style="margin-left:-10px;color:black;">个人用户</b></label> <label><input type="radio" name="user" value="enterprise user" style="width:20px;margin-top:18%;"/><b style="margin-left:-10px;color:black;">企业用户</b></label> </p> <p class="clearfix"> <label class="one" for="telphone">用户名:</label> <input id="telphone" name="telphone" class="required" value placeholder="请输入手机号" /> </p> <p class="clearfix"> <label class="one" for="password">登录密码:</label> <input id="password" name="password" type="password" class="{required:true,rangelength:[8,20],}" value placeholder="请输入密码" /> </p> <p class="clearfix"> <label class="one" for="confirm_password">确认密码:</label> <input id="confirm_password" name="confirm_password" type="password" class="{required:true,equalTo:'#password'}" value placeholder="请再次输入密码" /> </p> <p style="position:absolute;left:110px;">联系方式</p><hr> <p class="clearfix" style="margin-top:100px;"> <label class="one" for="telphone">手机号码:</label> <input id="telphone" name="telphone" class="required" value placeholder="请输入手机号" /> </p> <p class="clearfix"> <label class="one" >校验码:</label> <input class="identifying_code" type="text" value placeholder="请输入手机6位校验码" /> <input class="get_code" type="button" value="获取验证码" /> </p> <p class="clearfix"> <label class="one" for="agent">经纪人号:</label> <input id="agent" name="agent" type="text" class="required" value placeholder="请输入经纪人手机号" /> </p> <p class="clearfix agreement"> <input type="checkbox" /> <b class="left">已阅读并同意<a href="#">《用户协议》</a></b> </p> <p class="clearfix"><input class="submit" type="submit" value="立即注册"/></p> <p class="last"><a href="http://www.17sucai.com/">立即登录></a></p> </form> </div>
这样写:
nbsp;html>
账户信息
body内大div设置宽度,并使用上下边距0左右边距auto来居中,大div内部两个小div也是一样,设置宽度并通过上下边距0左右边距auto来居中;所有输入框垂直对齐的方式没有使用table,而是使用absolute来统一对齐,文本框设置为absolute后,会找上一级非static的父级以上元素,所以需要对小div的position设置为relative。
联系方式
与账户明细使用同一个class就行啦