用css写一个品字布局

可以的，品字布局可以使用CSS的flexbox布局来实现。具体实现方法可以参考以下代码：

HTML代码：

<div class="container">
  <div class="header">头部</div>
  <div class="left">左侧</div>
  <div class="main">主体</div>
  <div class="right">右侧</div>
  <div class="footer">底部</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.header,
.footer {
  width: 100%;
  height: 50px;
  background-color: #ccc;
}

.left,
.right {
  width: 200px;
  height: calc(100% - 100px);
  background-color: #eee;
}

.main {
  flex: 1;
  height: calc(100% - 100px);
  background-color: #fff;
}

以上代码实现了一个简单的品字布局，其中头部和底部占据整个容器的宽度，左侧和右侧固定宽度，主体部分自适应宽度。