CSS3是一種用于樣式設計的最新標準。它提供了很多強大的功能,包括可以輕松創建一個美觀、響應式的頂部信息欄。
/* 頂部信息欄樣式 */ .top-bar { background-color: #333; /* 背景顏色 */ height: 30px; /* 高度 */ line-height: 30px; /* 行高 */ color: #fff; /* 字體顏色 */ text-align: center; /* 文本居中 */ font-size: 14px; /* 字體大小 */ position: fixed; /* 固定在瀏覽器頂部 */ top: 0; /* 距離頂部0像素 */ width: 100%; /* 寬度100% */ z-index: 999; /* 置頂 */ } /* 頂部信息欄鏈接樣式 */ .top-bar a { color: #fff; /* 鏈接字體為白色 */ text-decoration: none; /* 去掉下劃線 */ margin-left: 20px; /* 鏈接之間留出一定間隔 */ } /* 頂部信息欄鏈接懸停樣式 */ .top-bar a:hover { color: #f00; /* 鏈接懸停字體為紅色 */ }
上述代碼中,定義了一個class為.top-bar的樣式來設置頂部信息欄。其中,設置了背景顏色、高度、行高、字體顏色、字體大小、位置等屬性。同時,鏈接的樣式和懸停樣式也一并定義了。
使用CSS3創建頂部信息欄非常簡單,只需要非常少的代碼即可實現一個美觀、實用的頂部信息欄。這對于一些需要展示重要信息、提供導航功能的網站非常有用。