css布局之圣杯篇

2018-03-01 07:54:13来源:cnblogs.com作者:菠萝提姆茶人点击

分享
 1 <div class="header">头部</div> 2     <div class="container"> 3         <div class="center"> 4             适应中间 5         </div> 6         <div class="left"> 7             固定左 8         </div> 9         <div class="right">10             固定右11         </div>12     </div>13 <div class="footer">脚部</div>
 1 .header { 2     width: 100%; 3     background: red; 4     height: 50px; 5 } 6 .container { 7     clear: both; 8     overflow: hidden; 9     padding: 0 130px 0 100px;10 }11 .container .left {12     width: 100px;13     float: left;14     background: orange;15     height: 100px;16     margin-left: -100%;17     position: relative;18     left: -100px;19 }20 .container .center {21     background: green;22     height: 100px;23     float: left;24     width: 100%;25 }26 .container .right {27     width: 130px;28     float: left;29     background: blue;30     height: 100px;31     margin-left: -130px;32     position: relative;33     right: -130px;34 }35 .footer {36     width: 100%;37     background: red;38     height: 50px;39 }

主要思路:center-->left-->right

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台