css5个div布局

CSS是网页设计中最为重要的部分之一，可以帮助我们实现不同的布局效果。在CSS中，使用div元素进行布局是非常普遍的一种方式。下面我们来看看如何使用CSS实现5个div布局。

<div class="wrapper">
    <div class="top-nav">这是顶部导航栏</div>
    <div class="sidebar-left">这是左侧边栏</div>
    <div class="main-content">这是主要内容</div>
    <div class="sidebar-right">这是右侧边栏</div>
    <div class="footer">这是底部</div>
</div> 

以上是我们要实现的5个div布局，每个div的作用分别为：

• 顶部导航栏（top-nav）
• 左侧边栏（sidebar-left）
• 主要内容（main-content）
• 右侧边栏（sidebar-right）
• 底部（footer）

接下来，我们给每个div设置样式：

.wrapper {
    display: grid;
    grid-template-rows: 60px 1fr 40px;
    grid-template-columns: 20% 1fr 20%;
    grid-template-areas:
    "top-nav top-nav top-nav"
    "sidebar-left main-content sidebar-right"
    "footer footer footer";
}
.top-nav {
    grid-area: top-nav;
    background-color: #333;
    color: #fff;
}
.sidebar-left {
    grid-area: sidebar-left;
    background-color: #ccc;
}
.main-content {
    grid-area: main-content;
    background-color: #fff;
}
.sidebar-right {
    grid-area: sidebar-right;
    background-color: #ccc;
}
.footer {
    grid-area: footer;
    background-color: #333;
    color: #fff;
} 

其中，我们使用了CSS的网格布局（grid）来实现五个div布局。

• 使用display:grid;将父元素设置为网格布局
• 使用grid-template-rows设置行高
• 使用grid-template-columns设置列宽
• 使用grid-template-areas设置网格区域
• 使用grid-area将子元素指定到对应的网格区域

至此，我们就实现了一个五个div布局。通过CSS的网格布局，我们可以轻松实现复杂的布局效果。希望本篇文章对你有所帮助。