html+css 简易后台布局结构

效果图
html+css 简易后台布局结构_第1张图片
代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width:100%;
            height:100%;
            overflow-y: hidden;
        }

        .container{
            width:100%;
            height:100%;
        }

        .body-container{
            min-width:1000px;
            height:100%;
            position:relative;
        }

        .container  .header{
            max-width:100%;
            min-width:1000px;
            height:50px;
            background-color: red;
        }

        .container .left-container{
            overflow: scroll;
            min-width: 150px;
            height:100%;
            position:absolute;
            left: 0;
            background-color: blue;
        }

        .container .left-container ul {
            list-style: none;
            width:100%;
            height:auto;
        }

        .container .left-container ul li{
            width:100%;
            height:40px;
            line-height: 40px;
            text-align: center;
            color:white;
        }

        .container .left-container ul li:hover{
            background-color: red;
            cursor: pointer;
        }

        .container .right-container{
            padding:15px;
            background-color: yellow;
            height:100%;
            margin-left:150px;
            overflow: scroll;
        }
style>

<body>

  <div class="container">
       <div class="header">div>
      <div class="body-container">
          <div class="left-container">
              <ul>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
                  <li>列表Oneli>
                  <li>列表Twoli>
              ul>
          div>
          <div class="right-container">1
              <br>1
              <br>1<br>1<br>1<br>1<br>1<br>1
              <br>1<br>1<br>1<br>1<br>1
              <br>1<br>1<br>1<br>1<br>1<br>1
              <br>1<br>1<br>1<br>1<br>1
              <br>1<br>1<br>1<br>1
              <br>1<br>1<br>1
              <br>1<br>1<br>1
              <br>1<br>1<br>1
              <br>1<br>1<br>1
              <br>1<br>1<br>1<br>1
              <br>1<br>1<br>1div>
      div>

  div>

body>
html>

你可能感兴趣的:(整合问题案例)