网站后台css样式的写法

后台主界面布局方式参考方案：

左侧是定位到屏幕

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

参考样式