在網頁設計中，布局是一個不可忽視的要素。良好的頁面布局不僅可以提高用戶體驗，還可以提高網頁的可讀性和可訪問性。而HTML與CSS就是實現網頁布局的重要工具。

在HTML當中，一個典型的網頁可以看作是一個由多個塊元素（div或section）組成的盒子模型。這些盒子模型可以通過CSS樣式控制位置和大小，從而實現網頁布局。接下來我們將簡要介紹HTML和CSS中上下布局的實現方法。

html:
<div id="container">
<div id="header">
<p>這是頭部</p>
</div>
<div id="content">
<p>這是內容區</p>
</div>
<div id="footer">
<p>這是底部</p>
</div>
</div>
css:
#container {
width: 960px;
height: 600px;
border:2px solid black;
}
#header {
height: 80px;
background-color: yellow;
}
#content {
height: 400px;
background-color: green;
}
#footer {
height: 120px;
background-color: blue;
}

上面的代碼中，我們把整個頁面包裹在一個id為"container"的div元素中。其中頭部、內容區和底部分別用了id為"header"、"content"和"footer"的div元素實現。通過CSS樣式，我們給不同的div元素指定了不同的高度和背景顏色，從而完成了上下布局。

上下布局是一個簡單但常用的網頁布局方式。在實際開發中，我們也可以通過其他HTML標簽、布局方法和CSS屬性擴展和優化這個布局。