1. 創建導航欄容器
在HTML中,我們可以使用div元素創建一個導航欄容器。代碼如下:
avbar">
2. 設置導航欄樣式
為了讓導航欄顯示出橫向效果,我們需要設置一些CSS樣式。具體來說,我們需要設置導航欄容器的display屬性為flex,同時設置它的子元素(即導航項)的樣式。代碼如下:
avbar {
display: flex;tentter; /* 將導航項居中 */d-color: #333; /* 設置背景色 */
height: 50px; /* 設置導航欄高度 */
avbar a {
color: white; /* 設置字體顏色 */ter; /* 設置文本居中 */one; /* 去掉下劃線 */g: 14px 16px; /* 設置內邊距 */
avbar a:hover {d-color: #ddd; /* 設置鼠標懸停時的背景色 */
color: black; /* 設置鼠標懸停時的字體顏色 */
3. 添加導航項
在導航欄容器中添加導航項。代碼如下:
avbar">
完整代碼示例:
avbar">