圣杯布局Float

最新推荐文章于 2023-04-26 21:45:31 发布

Yuri_hiphop

最新推荐文章于 2023-04-26 21:45:31 发布

阅读量113

点赞数 1

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

本文链接：https://blog.csdn.net/Yuli_love_dance/article/details/119993830

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圣杯布局Float方法

首先头部、底部、中间、左边、右边的盒子先建立起来。

<body>
    <div class="header">头部</div>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
</body>

再来设置style样式

<style>
    body {
        /*浏览器最小宽度 */
         min-width: 550px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    div{
        text-align: center;
    }
    .header,
    .footer {
        background: yellow;
        width: 100%;
    }
    .footer {
        /* 要记得清除浮动 */
        clear: both;
    }
    .main {
        height: 200px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }
    .left,
    .center,
    .right {
        float: left;
        line-height: 200px;
    }
    .center {
        width: 100%;
        height: 200px;
        background: red;
    }
    .left {
        width: 200px;
        height: 200px;
        background: green;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right {
        width: 150px;
        height: 200px;
        background: green;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }
</style>

效果图如下：

Yuri_hiphop

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局Float

圣杯布局Float方法首先头部、底部、中间、左边、右边的盒子先建立起来。<body> <div class="header">头部</div> <div class="main"> <div class="center">中间</div> <div class="left">左边</div> <div class="right"&gt
复制链接

扫一扫