在網(wǎng)站設(shè)計中，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作為我們的大容器。在這個容器的樣式中，我們將其寬度設(shè)置為80%，并使用margin屬性將其水平居中。

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

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

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