品字布局是一種比較流行的網頁布局，看起來簡潔又美觀。下面我們來看一下如何使用CSS實現一個品字布局。 首先，我們需要準備一個HTML結構。可以使用div元素來包含4個子元素，分別是上、下、左、右四個部分。具體代碼如下：

<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>

接下來，我們使用CSS來實現布局。首先，讓我們設置容器的寬度、高度和邊框：

.container {
width: 300px;
height: 300px;
border: 1px solid #000;
}

然后，讓我們設置上面和下面兩個部分的寬度和高度，并使用絕對定位將它們放在容器的上下兩端：

.top, .bottom {
position: absolute;
width: 100%;
height: 50px;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}

接下來，我們設置左側部分的寬度、高度和背景顏色，并使用絕對定位將其放在容器的左上角：

.left {
position: absolute;
width: 50px;
height: 200px;
background-color: #ccc;
top: 50px;
left: 0;
}

最后，我們設置右側部分的寬度、高度和背景顏色，并使用絕對定位將其放在容器的右上角：

.right {
position: absolute;
width: 50px;
height: 200px;
background-color: #ccc;
top: 50px;
right: 0;
}

最終的代碼如下：

<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #000;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 50px;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.left {
position: absolute;
width: 50px;
height: 200px;
background-color: #ccc;
top: 50px;
left: 0;
}
.right {
position: absolute;
width: 50px;
height: 200px;
background-color: #ccc;
top: 50px;
right: 0;
}
</style>

這樣，我們就成功地實現了一個品字布局！