CSS網頁布局通過設置元素的樣式，可以實現不同的效果。它可以讓網頁更加美觀、易用和適配不同設備屏幕。在本文中，我們來看一些基本的布局效果圖。

/*居中布局*/
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*兩欄布局*/
.left {
width: 70%;
float: left;
background-color: #eee;
}
.right {
width: 30%;
float: left;
background-color: #ccc;
}
/*三欄布局*/
.left {
width: 25%;
float: left;
background-color: #eee;
}
.middle {
width: 50%;
float: left;
background-color: #ccc;
}
.right {
width: 25%;
float: left;
background-color: #eee;
}
/*響應式布局*/
@media only screen and (max-width: 600px) {
/*手機尺寸以下的樣式*/
.box {
width: 100%;
}
.left, .right {
width: 100%;
float: none;
}
.middle {
display: none;
}
}

以上是一些常用的布局效果圖示例，可以根據實際需要進行調整。同時，根據實際項目情況，也可以組合多個布局效果，以實現更高級別的效果。