带导航的左右布局

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       body {
           height: 100%;
           margin: 0;
       }

       * {
           margin: 0;
           padding: 0;
       }

       .header {
           position: absolute;
           height: 90px;
           line-height: 90px;
           left: 0;
           right: 0;
           z-index: 1;
           -webkit-box-shadow: 0 10px 10px 0 rgba(17, 103, 166, 0.10);
           box-shadow: 0 10px 10px 0 rgba(17, 103, 166, 0.10);
           padding: 0 30px;
           background: #fff;
       }

       /*footer {
           position: absolute;
           height: 60px;
           line-height: 60px;
           left: 0;
           right: 0;
           bottom: 0;
           z-index: 1;
           text-align: center;
           background: #fff;
       }*/

       .title,
       .nav,
       .username-show {
           float: left;
       }

       .title {
           font-weight: bold;
       }

       .nav {
           margin-left: 60px;
       }

       .section-right {
           float: right;
       }

       .exit-page,
       .number-of-users {
           float: left;
       }

       .header ul li {
           height: 99px;
           line-height: 99px;
           float: left;
           list-style: none;
       }

       .number-of-users li {
           padding-right: 60px;
       }

       .username-show {
           padding-right: 60px;
       }


       .aside {
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           color: #FFF;

           width: 228px;
           background: #1A293A;
           padding:105px 30px 0px 36px;
       }
       .aside ul li {
   height: 58px;
   line-height: 58px;
}
       .article {
           position: absolute;
           left: 280px;
           /*如果侧边栏有宽度*/
           right: 0;
           top: 0;
           bottom: 0;
           padding: 68px 20px;
           overflow: auto;
           /*超出滚动显示*/
           background: #f5f5f5;
       }
   </style>

<body>
       <header class="header text-size24">
           <hgroup class="title">健康后台管理系统</hgroup>
           <nav class="nav">首页</nav>
           <div class="section-right">
               <ul class="number-of-users">
                   <li>在线用户：<span>400万</span></li>
                   <li>注册用户：<span>600万</span></li>
               </ul>
               <ul class="exit-page">
                   <li class="username-show">欢迎您，<span>张三</span></li>
                   <li class="withdraw-from">
                       <a href="javascript:;">退出</a>
                   </li>
               </ul>
       </header>
       <section>
           <aside class="aside">
               <ul>
                   <li class="home-nav">
                       <div>
                           <a>首页</a>
                       </div>
                   </li>
                   <li class="user-center-nav">
                       <div>
                           <a>用户中心</a>
                       </div>
                   </li>
                   <li class="content-management-nav">
                       <div>
                           <a>内容管理</a>
                       </div>
                   </li>
                   <li class="system-management-nav">
                       <div>
                           <a>系统管理</a>
                       </div>
                   </li>
               </ul>
           </aside>
           <article class="article">
               内容区域
           </article>
       </section>
       
   </body>

</html>

带导航的左右布局

猜你喜欢