css上左中右下布局

CSS是网页设计过程中必不可少的一部分，它可以帮助我们实现网页的不同布局方式。本文将介绍一种比较常见的上左中右下布局。

.container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 1fr 150px;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
} 

如上代码所示，我们首先定义了一个.container类，用于包裹整个布局。接着，我们使用了CSS3中的grid布局，grid-template-columns和grid-template-rows属性分别定义了三列和三行。grid-template-areas属性则用于指定每个区域的位置，我们将header放在顶部中央，nav放在左侧，main放在中央，aside放在右侧，footer放在底部中央。

通过这种上左中右下布局方式，我们可以快速、方便地实现网页的页面结构。当然，CSS还有很多其他的布局方式，根据实际需求选择合适的布局方式才是最重要的。