在網頁設計中，常常需要使用CSS來實現網頁布局，而常見的網頁布局圖也有很多種，其中比較常見的有以下幾種：

/* 第一種布局圖：單欄（一列布局） */
.container {
width: 100%;
}
/* 第二種布局圖：兩欄（二列布局） */
.container {
width: 100%;
}
.left {
width: 25%;
float: left;
}
.right {
width: 75%;
float: left;
}
/* 第三種布局圖：三欄（三列布局） */
.container {
width: 100%;
}
.left {
width: 20%;
float: left;
}
.middle {
width: 60%;
float: left;
}
.right {
width: 20%;
float: left;
}
/* 第四種布局圖：框架（框架布局） */
.container {
width: 100%;
}
.header {
height: 100px;
}
.left {
width: 200px;
float: left;
}
.middle {
float: left;
width: calc(100% - 200px);
}
.right {
float: right;
width: 200px;
}
.footer {
height: 100px;
clear: both;
}

上述的代碼中，前三種布局屬于基礎的網頁布局，分別是單欄、兩欄和三欄布局，而第四種布局是比較復雜的框架布局。

無論哪種布局，都需要使用CSS的float屬性來實現元素的左右浮動，也可以使用position屬性實現元素的定位、margin、padding等屬性來調整元素位置和間距。

網頁布局并不是一成不變的，需要根據實際情況來選擇適合的布局方式，同時考慮到響應式布局的適配問題，建議使用CSS3的媒體查詢來實現不同機型的適配。