CSS頂部橫條廣告是現代網頁設計的重要組成部分之一。它通常出現在網頁的頂部位置，用于展示重要的廣告信息或者網站推廣信息。這種廣告通常具有極高的曝光率，能夠在短時間內吸引用戶的注意力并傳達有效的信息。

<div class="top-ad">
<a href="#" class="ad-link">
<img src="ad-banner.jpg" alt="Top Ad" class="ad-banner">
</a>
<a href="#" class="close-btn">X</a>
</div>
<style>
.top-ad {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #f8f8f8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.ad-link {
display: block;
width: 80%;
height: 100%;
}
.ad-banner {
width: 100%;
height: 100%;
object-fit: cover;
}
.close-btn {
font-size: 24px;
font-weight: bold;
color: #666;
text-decoration: none;
margin-right: 16px;
}
</style>

代碼中的<div>標簽用于包裹整個廣告內容，并且設置了fixed定位，使得廣告始終保持在頁面的頂部位置。<a>標簽和<img>標簽用于展示廣告圖片，并且通過設置class屬性實現了樣式控制。<a>標簽的目標鏈接地址可以通過href屬性指定。同時，代碼中還定義了一個關閉按鈕，通過<a>標簽和class屬性實現了相應效果。

總之，CSS頂部橫條廣告在網頁設計中既能夠增加廣告收益，也能夠增加網站宣傳效果。通過靈活運用CSS樣式控制，我們可以實現各種各樣的頂部橫條廣告效果，以提高用戶體驗和收益。