本次上機訓練的內容是第五章的第三個練習，主要涉及CSS的選擇器和樣式屬性的運用。

在這個練習中，我們需要對一個HTML文檔中的各個元素進行樣式設置，使得頁面顯示效果更加美觀和整潔。首先需要使用id選擇器對文檔中的元素進行選擇，然后設置相應的樣式屬性。

#header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

上述代碼中，我們使用了id選擇器對頁面頂部的header元素進行了樣式設置，包括了背景顏色、字體顏色、內邊距和文本對齊等屬性。這些屬性的設置可以使得頁面頂部看起來更加整齊美觀。

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}

接下來，我們對頁面的導航欄進行樣式設置。我們首先選擇了類選擇器，即.navbar類，對導航欄整體進行了樣式設置，包括了背景顏色、外邊距、內邊距和列表的樣式等屬性。接著，我們使用后代選擇器和子選擇器對導航欄中的各個元素進行了樣式設置，包括了鏈接的字體顏色、內邊距和鼠標懸停時的背景顏色等屬性，以及將導航欄中的各個元素浮動在同一行上。

footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

最后，我們對頁面的底部進行了樣式設置。同樣使用了id選擇器，對footer元素進行了背景顏色、字體顏色、內邊距和文本對齊等屬性的設置。這些屬性的設置可以使得頁面底部看起來更加清晰明了，讓用戶更容易獲取所需的信息。

通過本次上機訓練，我們學會了使用CSS選擇器和樣式屬性對HTML文檔中的各個元素進行樣式設置，使得頁面顯示效果更加美觀和整潔。這是一個重要的前端開發知識點，在日后的工作和學習中也會有廣泛的應用。