在網站設計中，CSS布局是不可或缺的一部分，而div十CSS布局也是其中最常見的一種。下面我們就來介紹一下div十CSS布局的使用方法。

/*CSS樣式*/
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
.content {
width: 70%;
margin: 0 auto;
background-color: #f5f5f5;
padding: 20px;
box-sizing: border-box;
}
.sidebar {
width: 25%;
float: left;
background-color: #ddd;
padding: 20px;
box-sizing: border-box;
}
.article {
width: 75%;
float: right;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}

首先，我們需要一個包裹所有元素的容器，這里我們選擇使用class為.container的div作為我們的大容器。在這個容器的樣式中，我們將其寬度設置為80%，并使用margin屬性將其水平居中。

接下來，我們需要定義header、footer和content這三個區域的樣式。這三個區域都是占據整個頁面寬度的，因此我們不需要給它們設置寬度。header和footer都設置了背景色、文字顏色和居中樣式，content則是一個稱為“主體”的部分，我們在其中定義了它的背景色、居中樣式和內邊距。

接下來，我們需要分別定義sidebar和article兩個部分的樣式。這兩個部分都是占據容器寬度的一部分，因此我們需要根據需要分別設置其寬度。sidebar占據了整個容器寬度的25%并向左浮動，article占據了整個容器寬度的75%并向右浮動。除此之外，這兩個部分的樣式相似，都設置了背景色、內邊距和box-sizing屬性，保證其寬度不會隨著內邊距的增加而改變布局。

以上就是一個基本的div十CSS布局，通過這種方式，我們可以實現靈活、多樣化的頁面布局。