弹性布局,实现页面结构

我就是我 2024-03-24 13:24 18阅读 0赞

## 1.思路 ##

有三个板块,第一个是导航栏,第二个是中间内容,第三个是页脚,中间内容有左侧边栏,内容区域和右侧边栏

1.设定内外边距为0

2.设置导航栏样式

宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

3.设置中间的样式

宽度,高度,背景颜色,弹性布局,主轴居中,侧轴居中

设计左侧边栏,内容区域和右侧边栏:宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

4.设置页脚样式

宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

### 2.代码 ###

<!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>
    <body>
        <style>
    
            *{
                margin:0;
                padding:0;
                box-sizing:border-box;
            }
            .nav{
                width:100%;
                height:50px;
                background-color: rgb(60,60,60);
                color: white;
                text-align: center;
                line-height: 50px;
                font-size:20px;
            }
            .container{
                width:100%;
                height: 500px;
                background-color: rgb(52, 193, 193);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .container .left,.container .right{
                width:20%;
                height: 100%;
                background-color:rgb(8, 73, 103);
                font-size: 20px;
                line-height: 500px;
                text-align: center;
                color: black;
    
            }
            .container .content{
                width:60%;
                height: 100%;
                background-color:rgb(15, 166, 237);
                font-size: 20px;
                line-height: 500px;
                text-align: center;
                color: black;
            }
            .footer{
                width:100%;
                height:150px;
                background-color: grey;
                color: white;
                font-size: 20px;
                text-align:center;
                line-height: 150px;
            }
        </style>
        <div class="nav">
            导航栏
        </div>
        <div class="container">
            <div class="left">
                左侧边栏
            </div>
            <div class="content">
                内容区域
            </div>
            <div class="right">
                右侧边栏
            </div>
        </div>
        <div class="footer">
            页脚
        </div>
        
    </body>
    </html>

## 3.页面 ##

![81621aaf38b540f0a8abcf4d19907343.png][]

[81621aaf38b540f0a8abcf4d19907343.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0ddea75931764295929658a0c6490e6d.png