对 父div 进行相对布局需要用到 postion 属性, 需要将父元素设置为relative, 并将子元素设置为absolute,此时不管进行放大缩小排版不会混乱
position属性请参见W3shool
截图如下:
核心代码:
.company_board{position: relative;background-color: #999999;height:310px;
}/*表单以及内部样式*/
.company_board .company_board_form{position: absolute;top:10%;left:70%;width:200px;height:220px;padding:10px;border: 2px solid black;border-radius:10px;/*background-image: url("./src/img/logo_register_background.png");*/background-color:#999999;
}
核心Html 主要前两行
<div class="company_board"><div class="company_board_form"><div class="company_board_form_header"></div><div class="log_user_pass_div"><img src="./src/img/form_username.png"/><input type="text" class="log_user_pass_input" placeholder="手机号/用户名/邮箱"/><br/><img src="./src/img/form_password.png"/><input type="password" class="log_user_pass_input" placeholder="请输入密码"></div><div class="company_board_footer"><div class="quickmark_div"></div><div class="log_register_div"><input type="image" class="log_register_button" src="./src/img/form_log.png" alt="登录"/><br/><input type="image" class="log_register_button" src="./src/img/form_register.png" alt="注册"/></div></div></div></div>
实现的效果 -放大缩小版面不会混乱