css布局之三栏布局 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>This is header.</header>
  <section>
    <div class="main">
      <h3>This is main section.</h3>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
    </div>
    
    <aside class="left">
      <h3>left menu.</h3>
      <ul>
        <li>
          <a href="">link1</a>
        </li>
        <li>
          <a href="">link2</a>
        </li>
        <li>
          <a href="">link3</a>
        </li>
        <li>
          <a href="">link4</a>
        </li>
      </ul>
    </aside>
    <aside class="right">
      <h3>Right menu.</h3>
      <ul>
        <li>
          <a href="">link1</a>
        </li>
        <li>
          <a href="">link2</a>
        </li>
        <li>
          <a href="">link3</a>
        </li>
        <li>
          <a href="">link4</a>
        </li>
      </ul>
    </aside>
  </section>
</body>
</html>
 1 *{
 2   box-sizing: border-box;
 3 }
 4 
 5 body{
 6   background: #e1ddd9;
 7 }
 8 
 9 header, footer, .main, aside{
10   background: #fff;
11   padding: 10px;
12   margin-bottom: 10px;
13 }
14 
15 section{
16   overflow: hidden;
17   padding-left: 210px;
18   padding-right: 210px; 
19 }
20 
21 section .main, section aside{
22   float: left;
23 }
24 
25 section .main{
26   widows: 100%;
27 }
28 
29 section aside.left{
30   width: 200px;
31   margin-left: -100%;
32   position: relative;
33   left: -210px;
34 }
35 
36 section aside.right{
37   width: 200px;
38   margin-left: -200px;
39   position: relative;
40   left: 210px;
41 }

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>This is header.</h1>
  </header>
  
  
  <div class="main">
    <div class="main-inner">
      <h3>This is main section.</h3>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
      <p>This is p.</p>
    </div>
  </div>

  <aside class="left">
    <h3>left menu.</h3>
    <ul>
      <li>
        <a href="">link1</a>
      </li>
      <li>
        <a href="">link2</a>
      </li>
      <li>
        <a href="">link3</a>
      </li>
      <li>
        <a href="">link4</a>
      </li>
    </ul>
  </aside>
  <aside class="right">
    <h3>Right menu.</h3>
    <ul>
      <li>
        <a href="">link1</a>
      </li>
      <li>
        <a href="">link2</a>
      </li>
      <li>
        <a href="">link3</a>
      </li>
      <li>
        <a href="">link4</a>
      </li>
    </ul>
  </aside>
  
  <footer>
    <h1>This is footer.</h1>
  </footer>
</body>
</html>
*{
  box-sizing: border-box;
}

body{
  background: #e1ddd9;
}

header, footer, .main, aside{
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
}



.main, aside{
  float: left;
}

.main{
  float: left;
  width: 100%;
  overflow: hidden;
  
}

.main-inner{
  margin: 0 210px;
}


aside.left{
  width: 200px;
  margin-left: -100%;
}

aside.right{
  width: 200px;
  margin-left: -200px;
}
footer{
  clear: both;
}

posted @ 2016-10-21 17:03  jian,zhou  阅读(164)  评论(0)    收藏  举报