欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

圣杯布局详解--浮动

程序员文章站 2022-03-12 21:57:08
圣杯布局是什么:圣杯布局是两边固定宽度,中间自适应的三栏布局。中间栏放到文档流前面,先行渲染。目的是为了解决三栏布局。浮动实现:实现效果:首先HTML:头部
标签,内容区域
里面包含中、左、右三个 div 标签。底部
标签HTML代码://标题
&l...

圣杯布局是什么:

  • 圣杯布局是两边固定宽度,中间自适应的三栏布局。
  • 中间栏放到文档流前面,先行渲染。
  • 目的是为了解决三栏布局。

浮动实现:

实现效果:
圣杯布局详解--浮动
首先HTML:

  • 头部<header></header>标签,
  • 内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。
  • 底部<footer></footer>标签

HTML代码:

	//标题
    <header><h4>Header内容区</h4></header>
    //内容区
    <div class="container">
    	//中间区域
        <div class="middle column">
            <h4>中间区域</h4>
            <p>圣杯布局要求header和footer各自占领屏幕所有宽度,高度固定
                中间的container是一个三栏布局
                三栏布局两侧宽度固定不变,中间部分自动填充整个区域
                中间部分的高度是三栏中最高的区域的高度
            </p>
        </div>
        //左边区域
        <div class="left column">
            <h4>左边栏</h4>
        </div>
        //右边区域
        <div class="right column">
            <h4>右边栏</h4>
        </div>
        //清除浮动
        <div style="clear: both"></div>
    </div>
    //底部
    <footer><h4>Footer内容区</h4></footer>

CSS代码:

  • 首先我们设置中间三栏 中、左、右三个div浮动。

  • 我们设置中间 <div class="middle"></div>的css宽度为100%占满整个大div,那么此时左右div块会被挤到下方去。(如下图所示)
    圣杯布局详解--浮动

  • 此时我们要设置外层内容区域的div左右padding以便给左右div回来时候一个位置。(效果如下图所示)
    圣杯布局详解--浮动

  • 接下来我们要使左边栏回到上一行我们要给<div class="left"></div>一个相对定位(相对于其正常位置进行定位)position:relativemargin-left:-100%(为什么是100%?因为设置100%后它可以刚好和middle中间栏的左侧对齐);
    圣杯布局详解--浮动

  • 我们要给<div class="left"></div>添加right: 200px;样式属性使其回到第一行的最左侧。
    圣杯布局详解--浮动

  • 相同原理我们给右栏一个margin-right: -150px;使其回到原来位置,那么这个布局就完成啦。
    圣杯布局详解--浮动

		*{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 550px;
        }
        header{
            height: 40px;
            background-color: #50a0c3;
            padding-top: 10px;
            text-align: center;
            line-height: 40px;
            color: white;
        }
        .container{
            padding-left: 200px;
            padding-right: 150px;
        }
        .column{
            float: left;
        }
        .middle{
            width: 100%;
            height: 350px;
            background-color: salmon;
            text-align: center;
            padding-top: 50px;
        }
        .left{
            width: 200px;
            height: 400px;
            background-color: #d8e6a4;
            margin-left: -100%;
            position: relative;
            right: 200px;
            text-align: center;
            line-height: 400px;
        }
        .right{
            width: 150px;
            height: 400px;
            margin-right: -150px;
            text-align: center;
            line-height: 400px;
            background-color: #bed28c;
        }
        footer{
            width: 100%;
            height: 40px;
            background-color: #5b6063;
            text-align: center;
            line-height: 40px;
        }

本文地址:https://blog.csdn.net/weixin_43690348/article/details/111130809

相关标签: web前端