圣杯布局——实战项目入门

云喵喵是淼淼

已于 2022-04-29 21:50:58 修改

阅读量233

点赞数 1

分类专栏： css学习笔记 HTML学习笔记文章标签： html5 css

于 2022-04-29 21:30:02 首次发布

本文链接：https://blog.csdn.net/weixin_48610566/article/details/124365065

版权

HTML学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css学习笔记

10 篇文章 0 订阅

订阅专栏

文章目录

一、圣杯布局图解
二、实战项目
三、效果展示

一、圣杯布局图解

模块图解

二、实战项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局——简单版</title>
</head>
<style>
    .HolyGrail{
        display: flex;
        flex-direction: column;
        min-height:96vh ;
        background-color: beige;
    }  
    .header,.footer{
        flex:1;
        background-color: gainsboro;
        line-height: 11vh;
        text-align: center;
    }
    .HolyGrail-body{
        background-color: blue;
        display: flex;
        flex: 1;
    }
    .HolyGrail-nav,.HolyGrail-ads{
        /* 第一个是grow，第二个是shrink，第三个是basid，这是一个简写 */
        flex:0 0 12em;
        background-color: aquamarine;
    }
    .HolyGrail-content{
        background-color: blueviolet;
        text-align: center;
        line-height:75vh;
        flex:1;
    }
    .HolyGrail-nav{
        order:-1;
        background-color: pink;

    }
</style>
<body>
    <div class="HolyGrail">
        <!-- 语义标签：头部 -->
        <header class="header">头部导航栏</header>
        <div class="HolyGrail-body">
            <main class="HolyGrail-content">主体结构</main>
            <nav class="HolyGrail-nav">nav内容</nav>
            <aside class="HolyGrail-ads">侧边栏</aside>
        </div>
        <footer class="footer">尾部导航栏</footer>    
    </div>
</body>
</html>