CSS頂部彈出框是網頁設計中常用的一種效果，它可以讓網頁更加生動有趣。下面是一個簡單的實現示例，代碼使用了HTML和CSS語言。

<div class="popup">
<p class="message">這是一條提示信息！</p>
<a href="#" class="close">關閉</a>
</div>
.popup {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.popup .message {
display: inline-block;
margin: 0;
color: #333;
}
.popup .close {
float: right;
font-size: 18px;
color: #999;
text-decoration: none;
}
.popup .close:hover {
color: #333;
}

代碼中，我們首先定義了一個class為popup的div元素，使其position屬性為fixed，top屬性為0，也就是將其固定在頁面頂部。設置背景顏色、內邊距、陰影等樣式，使其在頁面中更加突出。

在popup元素中，我們還添加了一個class為message的p元素，用于顯示提示信息。同時，我們還添加了一個class為close的a元素，用于關閉頂部彈出框。設置了文本顏色、字體大小等樣式，并使用float屬性將其向右浮動。

通過使用CSS選擇器和樣式屬性，我們即可輕松實現一個簡單的頂部彈出框效果。在實際項目中，我們可以根據需要進行更加復雜和精細的設計，來創建更加美觀和實用的網頁效果。