在網頁設計中,右側導航欄被廣泛應用。HTML5為開發者提供了許多簡潔有效的代碼,幫助開發者輕松創建出漂亮的右側導航欄。下面我們看一下HTML5右側導航欄代碼的寫法。
<nav class="right-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
以上代碼使用了<nav>標簽來定義導航欄,并使用了類名"right-nav"使其靠右對齊。<ul>和<li>標簽被用來創建無序列表,在列表項中使用<a>標簽定義各個導航鏈接。
如果您想為當前所在頁面的鏈接添加一個特殊效果,您可以使用以下CSS代碼:
.right-nav li a.active { font-weight: bold; color: #ff0000; }
以上代碼會在當前所在頁面的導航欄鏈接上添加一個粗體效果并將字體顏色設置為紅色。
現在您已經掌握了HTML5右側導航欄的基本寫法以及添加特殊效果的CSS代碼。您可以根據實際需要對代碼進行自定義,創造出獨一無二的右側導航欄。
下一篇html5右側欄代碼