Home  >  Article  >  Web Front-end  >  I'm asking a web design expert to help me figure out how to achieve the look inside the box in the picture. The code is as follows. _html/css_WEB-ITnose

I'm asking a web design expert to help me figure out how to achieve the look inside the box in the picture. The code is as follows. _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:201279browse

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


Reply to discussion (solution)

Write like this:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7 Account information 6e916e0f7d1e588d4f442bf645aedb2f
0ebbac6612164b53b6873c4856052de1
9c3bca370b5104690d9ef395f2c5f8d1
769cbb542039d9a75a430d05b5cfa3b6
.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;
}
531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d
                                                                                                id="signupForm" method="post" action="" class="zcform">
cd46da93655104058b11298777473cff
                                                   one" for="telphone">User typeb6111db66c8ce2a90087e93cf2fc8145*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
                                             label>ef80142ec92e651f949d5016ffcc3f18
4bcd19d8fbd4613fe118f1813005a483Individual usersb6111db66c8ce2a90087e93cf2fc8145*54bdf357c58b8a65c66d7c19c8e4d1140d36329ec37a2cc24d42c7229b69747a8c1ecd4bb896b2264e0711597d40766c
                                                                                                                                                    96731ef3ff643a1a5722e770a0c6dbacBusiness usersb6111db66c8ce2a90087e93cf2fc8145*54bdf357c58b8a65c66d7c19c8e4d1140d36329ec37a2cc24d42c7229b69747a8c1ecd4bb896b2264e0711597d40766c
p> ;8c1ecd4bb896b2264e0711597d40766c
                                                                                                                                                                                                     />94b3e26ee717c64999d7867364b1b4a3
                                                                   20edc0fc214832af43e54631f312109b登录密码37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
             646258b24fe7af4065ed288323a6b2b3
6fc1152eaf60db8f98a4947f2821c562
     54bdf357c58b8a65c66d7c19c8e4d114
           94b3e26ee717c64999d7867364b1b4a3
           2661fe612134550c8a43d6935cef3270
                   849b9818be8550fac09df271b0f3bb7d确认密码37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
                   646258b24fe7af4065ed288323a6b2b3
             8f9f7d066249e94826cb37bbd1bd3583
    54bdf357c58b8a65c66d7c19c8e4d114
        16b28748ea4df4d9c2150843fecfba68
      94b3e26ee717c64999d7867364b1b4a3
     
      76541fb5e7b0d5abaf17f6416b10757b联系方式37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
      f32b48428a809b51f04d3228cdf461fa
      7030da3f025dc0da09227cca386c64d3
              2661fe612134550c8a43d6935cef3270
                  8fb8eddfe5fd1bc24264941d67df9b42手机号码37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
                  646258b24fe7af4065ed288323a6b2b3
               a11c064e038ad0d6f924c60e4aeb38c4
          54bdf357c58b8a65c66d7c19c8e4d114
              94b3e26ee717c64999d7867364b1b4a3
        2661fe612134550c8a43d6935cef3270
                 9f3e966054b38d8a7ed943bfeba0e451校验码37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
                 646258b24fe7af4065ed288323a6b2b3
          988f49895231c262d1739ef5dbfd7dd5
                          6f1fe91f4cce524a97da9436935316dc
 54bdf357c58b8a65c66d7c19c8e4d114
        94b3e26ee717c64999d7867364b1b4a3 
        2661fe612134550c8a43d6935cef3270
                e82ac68a60a720b094a55fcfd3427fbe经纪人号37dd9a29b613ae84b50a31c17c18f0a3*54bdf357c58b8a65c66d7c19c8e4d1148c1ecd4bb896b2264e0711597d40766c
                646258b24fe7af4065ed288323a6b2b3
         64e454a2b4b6a1aa766d8dcc802d27b7
54bdf357c58b8a65c66d7c19c8e4d114
        94b3e26ee717c64999d7867364b1b4a3
        23a056286f33de20cc0bd431903fa240
                b1be5f894b3985eb9b27afbfb6d88d28
                6f834d2def59f544d6d882c065d6aa2f已阅读并同意f1b3ba8846c179e65eb68da95b01a812《用户协议》5db79b134e9f6b82c0b36e0489ee08ed0d36329ec37a2cc24d42c7229b69747a
         94b3e26ee717c64999d7867364b1b4a3
         2661fe612134550c8a43d6935cef32703376e5eea1e9a5aa9b19a98c8af5eaa694b3e26ee717c64999d7867364b1b4a3   
         8d7bd3ce9be457fa13b237d0563ed684f5caec660ead78d5d139acdea4bb003a立即登录>5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3      
    16b28748ea4df4d9c2150843fecfba68
  f5a47148e367a6035fd7a2faa965022e  
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Set the width of the large div in the body, and use the top and bottom margins of 0 and left and right margins auto to center the two inside the large div The same is true for a small div. Set the width and center it with the top and bottom margins of 0 and the left and right margins auto; all input boxes are vertically aligned without using tables, but using absolute for unified alignment. After the text box is set to absolute, it will be found For elements above the first-level non-static parent, the position of the small div needs to be set to relative.

118834711dc10123d2123a423867af58Contact information94b3e26ee717c64999d7867364b1b4a3
f32b48428a809b51f04d3228cdf461fa
The implementation effect here should be the same as starting "Account Information " has the same effect. The only difference is that the style attribute is added to the paragraph mark here. I found that removing this attribute can achieve the effect you need.

Just use the same class as the account details

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn