网格布局和圣杯布局

最新推荐文章于 2023-05-17 16:57:26 发布

迪卢克的现任

最新推荐文章于 2023-05-17 16:57:26 发布

阅读量169

点赞数 1

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

本文链接：https://blog.csdn.net/m0_53644435/article/details/120984453

版权

css 专栏收录该内容

12 篇文章 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>Document</title>
</head>
<style>
    .Grid{
        display: flex;
        margin-top: 10px;
        /* text-align: center; */
    }
    .Grid-cl1,.Grid-cl2{
        flex: 1;
        background-color: rgb(216, 215, 194);
        margin-left: 5px;
    }
    .Grid-cl2{
        height: 200px;
    }
</style>
<body>
    <div class="Grid">
        <div class="Grid-cl1">1/2</div>
        <div class="Grid-cl1">1/2</div>
    </div>
    <div class="Grid">
        <div class="Grid-cl1">1/3</div>
        <div class="Grid-cl1">1/3</div>
        <div class="Grid-cl1">1/3</div>
    </div>
    <div class="Grid">
        <div class="Grid-cl1">1/4</div>
        <div class="Grid-cl1">1/4</div>
        <div class="Grid-cl1">1/4</div>
        <div class="Grid-cl1">1/4</div>
    </div>
    <div class="Grid">
        <div class="Grid-cl2">.....</div>
        <div class="Grid-cl2">.....</div>
    </div>
</body>
</html>

效果如图：

二、圣杯布局

1.代码示例及结果

代码如下（示例）：

<!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>Document</title>
</head>
<style>
      body{
        display: flex;
        min-height: 96vh;
        flex-direction: column;
    }
    
    header,footer{
        flex: 1;
        /* height: 70px; */
        background-color: slateblue;
        text-align: center;
        line-height: 11vh;
    }
  
    .d2
    {
        display: flex;
        flex: 1;
    }
    .content{
        background-color: springgreen;
        flex: 1;
        text-align: center;
        line-height: 75vh;
    }
    .aside,.nav{
        flex: 0 0 12em;
        height: 75vh;
    }
    .nav{
        order: -1;
        background-color: steelblue;
        text-align: center;
        line-height: 75vh;
    }
    .aside{
        background-color: brown;
        text-align: center;
        line-height: 75vh;
    }

</style>
<body>
    <header>#header</header>
    <div class="d2">
        <main class="content">#content</main>
        <nav class="nav">#side</nav>
        <aside class="aside">#right</aside>
    </div>
    <footer>#footer</footer>
</body>
</html>

圣杯布局：指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏