網頁設計中的頂部導航欄是一個十分重要的部分，而CSS可以為其添加許多豐富的樣式，讓其看起來更加好看和有吸引力。以下是一些不錯的頂部樣式示例：

nav {
background-color: #333;
height: 70px;
display: flex;
align-items: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
font-size: 20px;
font-weight: bold;
}
nav a:hover {
border-bottom: 2px solid #fff;
}

上述代碼可以實現一個簡單但時尚的導航欄，背景顏色為深灰色，高度為70像素，使用了Flex布局，使鏈接垂直居中。鏈接的顏色為白色，字號20像素，字體加粗。當鼠標懸停在鏈接上時，將顯示出一個白色的下劃線。

header {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 400px;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
header h1 {
font-size: 3em;
text-shadow: 2px 2px 5px #333;
}

上述代碼可以實現一個帶有大圖背景的頭部區域，使用了一張名為bg.jpg的圖片作為背景。背景圖片不會重復顯示，并將隨著屏幕大小自適應。區域高度為400像素，內部使用了Padding屬性，使得內容區域距離頭部有一定的間隔。使用了Flex布局，將標題垂直居中并水平居中。標題使用了文字陰影，增加了一些立體效果。

無論是哪種樣式，都可以讓網頁更加美觀，吸引人眼球，增強用戶體驗。使用CSS來實現這些樣式是非常簡單的，只需要多多嘗試，不同的樣式將會有不同的視覺效果。