经典布局实现-定宽，绝对定位

by lai chendong

HTML

<nav class="top-nav"></nav>
<div class="main-container">
  <nav class="left-nav"></nav>
  <div class="main"></div>
</div>
<footer class="footer"></footer>

CSS

.top-nav{
  width:100%;
  height:80px;
  margin-bottom:20px;
}
.main-container{
  width:1260px;
  margin:0 auto;
  margin-bottom:20px;
  position:relative;
}
.left-nav{
  width:200px;
  height:300px;
  position:absolute;
}
.main{
  width:1040px;
  height:600px;
  margin-left:220px;
}
.footer{
  height:100px;
  width:1260px;
  margin:0 auto;
}
.top-nav, .left-nav, .main, .footer{
  background:#ccc;
}