后台主界面布局方式参考方案:
左侧是定位到屏幕
position:fixed; left:0; top:0; bottom:0; width:250px;
右侧上方导航需要绝对定位,
left:250px; top:0; right:0; height:90px;
横向滚动条固定在底部,需要给绝对定位的div设置
bottom:0;
后台登录页
<div id="" class="logonform">
<form method="post" action="">
<input type="hidden" name="role" value="admin">
<div class="account">
<label for="Account"><span>账号</span></label>
<div class="account-input">
<input id="Account" type="text" name="account" ismxfilled="1">
</div>
<div class="account-errormsg errormsg"><span></span></div>
<div class="apisqlerror-errormsg errormsg"><span></span></div>
</div>
<div class="password">
<label for="Password"><span>密码</span></label>
<div class="password-input">
<input id="Password" type="password" name="password" ismxfilled="1">
</div>
<div class="password-errormsg errormsg"><span></span></div>
</div>
<div class="isauto">
<div class="isauto-input">
<input id="isAuto" name="isAuto" type="checkbox" value="true">
</div>
<label for="isAuto"><span>自动登录</span></label>
</div>
<div class="submit">
<input type="submit" value="登录">
</div>
</form>
</div>
/*登录页*/
.logon .logonform { background:url(logonform.png) no-repeat center; width:566px; height:385px; position:absolute; left:50%; top:50%; margin-left:-283px; margin-top:-192.5px;}
.logon { margin:0; padding:0; width: 100%; height: 100%; background:url(logonbg.jpg) no-repeat center center; background-size:100% 100%; }
.logon .account { margin:0 auto; margin-top:130px; width:401px; height:48px;clear:both; }
.logon .account label { display:none;}
.logon .account .account-input {background:url(account.png) no-repeat center; clear:both; overflow:hidden; width:401px; height:48px; }
.logon .account .account-input input{border:none; margin-left:48px; width:347px; padding-left:3px; height:42px; margin-top:3px; }
.logon .password { margin:0 auto; margin-top:25px; width:401px; clear:both; }
.logon .password label { display:none;}
.logon .password .password-input { background:url(account.png) no-repeat center; clear:both; overflow:hidden; width:401px; height:48px; }
.logon .password .password-input input{border:none; margin-left:48px; width:347px; padding-left:3px; height:42px; margin-top:3px; }
.logon .errormsg { width:401px; line-height:25px; text-align:left; }
.logon .errormsg span { color:#f00; font-size:14px; color:#999999; font-family:"Microsoft Yahei";}
.logon .isauto { width:401px; margin:0 auto; height:30px; line-height:30px; clear:both; overflow:hidden; }
.logon .isauto .isauto-input { float:left; margin-top:5px;}
.logon .isauto label { float:left; }
.logon .submit { clear:both; overflow:hidden; }
.logon .submit input { width:401px; height:50px; line-height:50px; cursor:pointer; text-align:center; background:url(denglubtn.png) no-repeat center; text-indent:-10000px; border:none; outline:0; display:inline;}
参考样式