CSS頁面分上中下可通過CSS樣式實現，其中比較常用的樣式是flexbox布局。在CSS中，可以使用flexbox布局將頁面劃分為上中下三個部分。 首先，在HTML中可以使用三個div元素和三個p元素將頁面劃分為上中下三個部分。HTML代碼如下：

<div class="top">
<p>這是頁面的頂部</p>
</div>
<div class="middle">
<p>這是頁面的中部</p>
</div>
<div class="bottom">
<p>這是頁面的底部</p>
</div>

接著，在CSS中使用flexbox布局將頁面的上中下三個部分進行分割，并設置相應的樣式。CSS代碼如下：

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.top {
flex: 0 0 auto;
background-color: #eee;
height: 100px;
}
.middle {
flex: 1;
background-color: #ddd;
height: 100%;
}
.bottom {
flex: 0 0 auto;
background-color: #ccc;
height: 50px;
}

其中，body元素的display屬性設置為flex，表示使用flexbox布局。flex-direction屬性設置為column，表示將頁面垂直分列布局。min-height屬性設置為100vh，表示根據視口的高度確定頁面的最小高度。 對于每個部分，都需要設置相應的flex屬性值。top部分的flex屬性值為0 0 auto，表示該部分不可拉伸，且默認大小為所占空間的大小。middle部分的flex屬性值為1，表示該部分可拉伸，且拉伸比例為1。bottom部分的flex屬性值為0 0 auto，表示該部分不可拉伸，且默認大小為所占空間的大小。 最后，通過設置各個部分的背景色和高度，完成頁面上中下分割的效果。 綜上，通過flexbox布局可以很方便地實現頁面的上中下分割，使用起來非常簡便。