在網頁設計與開發中,導航欄的設計與設置是非常重要的一部分。CSS是一種非常常用的設計網頁樣式的語言,也可以用來設置導航欄樣式。
/* 導航欄樣式 */ .navigation { background-color: #333; overflow: hidden; } /* 導航欄鏈接樣式 */ .navigation a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* 鼠標懸停導航欄鏈接樣式 */ .navigation a:hover { background-color: #ddd; color: black; }
以上代碼中,首先為導航欄設置了一個背景顏色和一個overflow:hidden屬性,使得導航欄可以完全覆蓋在一個div容器內,并且不會產生滾動條。
接著,為導航欄中的鏈接設置了如下樣式:浮動到左側,塊級顯示,字體顏色設置為白色,居中顯示以及垂直方向上的內邊距。
最后,為了美化效果,在鼠標懸停鏈接時設置了一個背景顏色和字體顏色。
使用CSS可以非常輕松地設置網站導航欄的樣式,讓用戶可以更加方便地瀏覽網頁。
下一篇用css設置單元格邊距