Div#navbar2樣式會設置包含有導航條鏈接的div的尺寸和背景。
Div#navbar2 ul樣式包含有margin和padding聲明,以強制取代被分配給無序列表的缺省空白,并設置文字的整體格式。White-space: nowrap聲明會保證列表顯示在一個水平的行里,即使瀏覽器的窗口太窄而無法顯示整個行。
這個技巧真正的秘密在div#navbar2 li樣式里。List-style-type: none聲明會刪除通常用來標記每個列表項目的Bullet;而display: inline聲明則能夠讓列表項目在頁面上從左向右浮動,而不會讓每個項目顯示在單獨的行里。
這個技巧的另外一個關(guān)鍵元素是div#navbar2 li a規(guī)則。Text-decoration: none聲明會刪除鏈接常用的下劃線,而padding: 7px 10px聲明則用來控制導航條里鏈接(之間)的空白。左側(cè)和右側(cè)間隙用來控制水平間隔,而我們需要頂部和底部間隙,讓它們把滾動效果(以及按鈕的可點擊區(qū)域)的彩色背景充滿整個導航條。你還可以加入左側(cè)和右側(cè)空白值,如果你想要在按鈕之間加入更多空白的話。
,:link, :visited和:hover偽類(pseudoclasse)的規(guī)則會設置用于滾動效果的顏色變化。
你可以改變這個基本的技巧,以創(chuàng)建很多不同的導航條效果,包括流行的“目錄選項卡”樣式。