html+css布局之--圣杯布局

圣杯布局,就是两边定宽,中间自适应的三栏布局!今天把这个布局代码,码一下!看代码不作过多解释!代码很简单!

 <div id="parents">
    <div id="top">这是header!</div>
    <div id="main">
        <div id="left">这是Left</div>
        <div id="content">这是Content!</div>
        <div id="right">这是Right!</div>
    </div>
    <div id="foot">这是Footer!</div>
</div>
<style>
 * {
        margin: 0;
        padding: 0;
    }
    
    #parents {
        width: 100%;
        margin: 0 auto;
        background: #ccc;
    }
    
    #left,
    #content,
    #right {
        padding-bottom: 2000px;  //2000像素的补偿
        margin-bottom: -2000px;
    }
    
    #main {
        padding-left: 100px;
        padding-right: 150px;
        overflow: hidden;
    }
    
    #top {
        background: #666;
    }
    
    #left {
        background: #E79F6D;
        float: left;
        width: 100px;
        position: relative;
        left: -100px;
    }
    
    #content {
        background: #D6D6D6;
        float: left;
        width: 100%;
        margin-left: -100px;
    }
    
    #right {
        background: #77BBDD;
        float: left;
        width: 150px;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }
    
    #foot {
        background: #666;
        clear: both;
    }
</style>

提示:自己动手试一下,效果会更好!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,786评论 25 709
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,183评论 0 59
  • 姓名:陆振村~公司:浙江均泰建设有限公司 【日精进打卡第17天】 【知~学习】 《六项精进》大纲1遍 共20遍 《...
    陆振村阅读 129评论 0 0
  • 1 许多人刚上大学时,都会很不习惯大学生活,想起我刚上大学的时侯,经常会听到同学抱怨大学生活,而最常听到的就是:“...
    凌皓辰阅读 431评论 6 3