求网页设计高手帮我看看，要实现图中框里面的那个样子，该怎么弄，代码如下。

时间：2020-12-01 08:53:12
<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/">立即登录&gt;</a></p>      

     </form>  

</div>
求网页设计高手帮我看看，要实现图中框里面的那个样子，该怎么弄，代码如下。

4 个解决方案

#1

这样写：

<!DOCTYPE html>
<html>
 <head>
  <title> 账户信息 </title>
  <meta name="keywords" content="" />
 </head>
  <style type="text/css">
.wrapper {
width:860px;
margin:0 auto;
position:relative;
}

.subcontainer {
width:500px;
margin:0 auto;
position:relative;
}

.wrapper .title {
color:#ff0000;
}

.asterisk {
color:red;
}

.rinp {
position:absolute;
left:90px;
}
</style>
 <body>
      <div class="wrapper">
      <p class="title">账户信息</p>
    <hr>
            <form id="signupForm" method="post" action=""  class="zcform">         
<div class="subcontainer">
                     <p>
                             <label class="one" for="telphone">用户类型<span class="asterisk">*</span></label>
             <span class="rinp">
     <label><input class="inptxt" type="radio" name="user" value="Individual user"  checked="checked" style="width:20px;color:#ffffff;"/>
     <b style="margin-left:-10px;color:black;" >个人用户<span class="asterisk">*</span></b></label>
                             <label><input type="radio" name="user" value="enterprise user" style="width:20px;"/>
     <b style="margin-left:-10px;color:black;">企业用户<span class="asterisk">*</span></b></label>
             </span>
                      </p>                    
         <p class="clearfix">
            <label class="one" for="telphone">用户名<span class="asterisk">*</span></label>
             <span class="rinp">
      <input id="telphone" name="telphone" class="required inptxt" value placeholder="请输入手机号" /></p>
             </span>
          <p class="clearfix">
             <label class="one"  for="password">登录密码<span class="asterisk">*</span></label>
             <span class="rinp">
<input id="password" name="password" type="password" class="inptxt {required:true,rangelength:[8,20],}" value placeholder="请输入密码" />
     </span>
           </p>
           <p class="clearfix">
                   <label class="one" for="confirm_password">确认密码<span class="asterisk">*</span></label>
                   <span class="rinp">
             <input id="confirm_password" name="confirm_password" type="password" class="inptxt {required:true,equalTo:'#password'}" value placeholder="请再次输入密码" />
    </span>
        </div>
      </p>
     
      <p class="title">联系方式<span class="asterisk">*</span></p>
      <hr>
      <div class="subcontainer">
              <p class="clearfix">
                  <label class="one" for="telphone">手机号码<span class="asterisk">*</span></label>
                  <span class="rinp">
               <input id="telphone" name="telphone" class="required inptxt" value placeholder="请输入手机号" />
          </span>
              </p>
        <p class="clearfix">
                 <label class="one">校验码<span class="asterisk">*</span></label>
                 <span class="rinp">
          <input class="identifying_code inptxt" type="text" value placeholder="请输入手机6位校验码" />
                          <input class="get_code" type="button" value="获取验证码" />
 </span>
        </p> 
        <p class="clearfix">
                <label class="one" for="agent">经纪人号<span class="asterisk">*</span></label>
                <span class="rinp">
         <input id="agent" name="agent" type="text" class="required inptxt" value placeholder="请输入经纪人手机号" />
</span>
        </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/">立即登录&gt;</a></p>      
    </div>
  </form>  
</div>
</body>
</html>

#2

body内大div设置宽度，并使用上下边距0左右边距auto来居中，大div内部两个小div也是一样，设置宽度并通过上下边距0左右边距auto来居中；所有输入框垂直对齐的方式没有使用table，而是使用absolute来统一对齐，文本框设置为absolute后，会找上一级非static的父级以上元素，所以需要对小div的position设置为relative。

#3

<p style="position:absolute;left:110px;">联系方式</p>
<hr>
这里的实现效果应该和开始“账户信息”的效果一样的，唯一的区别就是此处的段标记里面加了style属性，发现去掉此属性就能实现你需要的效果了。

#4

与账户明细使用同一个class就行啦

#1

这样写：

<!DOCTYPE html>
<html>
 <head>
  <title> 账户信息 </title>
  <meta name="keywords" content="" />
 </head>
  <style type="text/css">
.wrapper {
width:860px;
margin:0 auto;
position:relative;
}

.subcontainer {
width:500px;
margin:0 auto;
position:relative;
}

.wrapper .title {
color:#ff0000;
}

.asterisk {
color:red;
}

.rinp {
position:absolute;
left:90px;
}
</style>
 <body>
      <div class="wrapper">
      <p class="title">账户信息</p>
    <hr>
            <form id="signupForm" method="post" action=""  class="zcform">         
<div class="subcontainer">
                     <p>
                             <label class="one" for="telphone">用户类型<span class="asterisk">*</span></label>
             <span class="rinp">
     <label><input class="inptxt" type="radio" name="user" value="Individual user"  checked="checked" style="width:20px;color:#ffffff;"/>
     <b style="margin-left:-10px;color:black;" >个人用户<span class="asterisk">*</span></b></label>
                             <label><input type="radio" name="user" value="enterprise user" style="width:20px;"/>
     <b style="margin-left:-10px;color:black;">企业用户<span class="asterisk">*</span></b></label>
             </span>
                      </p>                    
         <p class="clearfix">
            <label class="one" for="telphone">用户名<span class="asterisk">*</span></label>
             <span class="rinp">
      <input id="telphone" name="telphone" class="required inptxt" value placeholder="请输入手机号" /></p>
             </span>
          <p class="clearfix">
             <label class="one"  for="password">登录密码<span class="asterisk">*</span></label>
             <span class="rinp">
<input id="password" name="password" type="password" class="inptxt {required:true,rangelength:[8,20],}" value placeholder="请输入密码" />
     </span>
           </p>
           <p class="clearfix">
                   <label class="one" for="confirm_password">确认密码<span class="asterisk">*</span></label>
                   <span class="rinp">
             <input id="confirm_password" name="confirm_password" type="password" class="inptxt {required:true,equalTo:'#password'}" value placeholder="请再次输入密码" />
    </span>
        </div>
      </p>
     
      <p class="title">联系方式<span class="asterisk">*</span></p>
      <hr>
      <div class="subcontainer">
              <p class="clearfix">
                  <label class="one" for="telphone">手机号码<span class="asterisk">*</span></label>
                  <span class="rinp">
               <input id="telphone" name="telphone" class="required inptxt" value placeholder="请输入手机号" />
          </span>
              </p>
        <p class="clearfix">
                 <label class="one">校验码<span class="asterisk">*</span></label>
                 <span class="rinp">
          <input class="identifying_code inptxt" type="text" value placeholder="请输入手机6位校验码" />
                          <input class="get_code" type="button" value="获取验证码" />
 </span>
        </p> 
        <p class="clearfix">
                <label class="one" for="agent">经纪人号<span class="asterisk">*</span></label>
                <span class="rinp">
         <input id="agent" name="agent" type="text" class="required inptxt" value placeholder="请输入经纪人手机号" />
</span>
        </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/">立即登录&gt;</a></p>      
    </div>
  </form>  
</div>
</body>
</html>

#2

body内大div设置宽度，并使用上下边距0左右边距auto来居中，大div内部两个小div也是一样，设置宽度并通过上下边距0左右边距auto来居中；所有输入框垂直对齐的方式没有使用table，而是使用absolute来统一对齐，文本框设置为absolute后，会找上一级非static的父级以上元素，所以需要对小div的position设置为relative。

#3

<p style="position:absolute;left:110px;">联系方式</p>
<hr>
这里的实现效果应该和开始“账户信息”的效果一样的，唯一的区别就是此处的段标记里面加了style属性，发现去掉此属性就能实现你需要的效果了。

#4

与账户明细使用同一个class就行啦
标签：

相关文章