css圣杯布局

最新推荐文章于 2024-06-17 00:08:19 发布

正在修炼web的小芮

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量189

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125610573

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

输入style样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 120px;
            background-color: #5B5A5A;
        }
        .container{
             overflow: hidden;
              /*  外层的container设置 padding-left: 500px;padding-right: 150px;，
                目的是：
                给left和right ，给这两个盒子，腾出显示的位置（或者说空出位置）。
            */
             padding-left: 500px;
             padding-right: 150px;
             outline: 1px dashed red;
        }
    .container .left, .container .center, .container .right{
         /* 都三个盒子 都设置 高度是900像素 */
        height: 900px;
          /* 都三个盒子 都设置 左浮动 */
        float: left;
    }
        /* 圣杯布局 写六遍 */
        .container .left{
            width: 500px;
            background-color: #63B5EC;
            margin-left: -500px;
        }
        .container .center{
            width: 100%;
            background-color: #CEC9C9;
        }
        .container .right{
            width: 150px; 
            background-color: #E76902;
            margin-right: -150px;
        }
        .footer{
            width: 100%;
            height: 150px;
            background-color: #5B5A5A;
        }
    </style>

body文本

<body>
    <!-- header和footer各自占领屏幕所有宽度，高度固定
         中间的container是一个三栏布局。
         三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
         中间部分的高度是三栏中最高的区域的高度 -->
    <!-- .header+.container+.footer -->
   <div class="header">

   </div>
   <div class="container">
    <!-- 圣杯布局就是左右两边大小固定不变，中间宽度自适应。 -->
    <!-- .left+.center+.right -->
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
   </div>
   <div class="footer">

   </div> 
</body>

最后效果图