CSS是網頁設計中十分重要的一部分，它可以讓網頁變得更加美觀和易于閱讀。下面我們來介紹CSS從下到上效果。

/* 給頁面添加背景色 */
body {
background-color: #fff;
}
/* 設置頁面中的標題樣式 */
h1 {
font-size: 32px;
color: #333;
text-align: center;
margin-top: 100px;
}
/* 給頁面中的主要內容框添加樣式 */
#main {
width: 80%;
margin: 0 auto;
background-color: #f5f5f5;
padding: 20px;
margin-top: 50px;
}
/* 給主要內容框中的段落添加樣式 */
#main p {
font-size: 18px;
color: #666;
line-height: 1.5;
margin-bottom: 20px;
}
/* 給頁腳添加樣式 */
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
/* 鼠標移動到頁腳上時改變其背景色 */
#footer:hover {
background-color: #444;
}

上述代碼中，我們先給整個頁面添加了一個白色的背景色，并通過h1元素設置了頁面中的標題樣式，設置了字號、顏色、居中和上邊距。接下來我們給頁面中的主要內容框添加了樣式，設置了寬度、居中、背景顏色、內邊距和上邊距。同時，我們還給主要內容框中的段落添加了樣式，設置了字號、顏色、行高和下邊距。

最后，我們給頁腳添加了樣式，設置了背景色、字體顏色、居中、內邊距、固定在頁面底部和寬度。并加入鼠標移動到頁腳上時會改變其背景色的效果。

通過這樣的CSS處理，網頁從下到上呈現出了清晰的布局和美觀的效果，用戶體驗也相對較佳。