请选择 进入手机版 | 继续访问电脑版
网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 676|回复: 0

【HTML5:第九章 盒模型相关样式】经典案例-圣杯布局

[复制链接]

232

主题

233

帖子

1010

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1010
发表于 2022-1-12 10:58:08 | 显示全部楼层 |阅读模式
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .container{
        display: flex;
        height: 100vh;
        flex-direction: column;
    }
    header{
        background: #000;
    }
    section{
        flex:1;
        background: pink;
        display: flex;
    }
    footer{
        background: #000;
    }
    .left{
        background: red;
        flex:0 0 100px;
    }
    .center{
        flex:1;
        background: blue;
    }
    .right{
        flex:0 0 100px;
        background: red;
    }
    </style>
</head>
<body>

<div class='container'>

    <header>头部</header>
    <section>
        <div class='left'>左</div>
        <div class='center'>中</div>
        <div class='right'>右</div>
    </section>
    <footer>底部</footer>

</div>

</body>
</html>

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2023-2-4 19:35 , Processed in 0.190976 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表