導覽列是一種圖形功能,允許使用者瀏覽網站或應用程式。它通常以連結列表的形式呈現在螢幕的頂部或側面,並幫助用戶導航到網站內的各個區域或頁面。 HTML 和 CSS 可用於建立水平或垂直導覽列。
HTML 用於指定導覽列的結構和內容,而 CSS 用於設計並使導覽列看起來有吸引力。您可以透過新增導覽列來改善整體使用者體驗,並使使用者更輕鬆地在您的網站上找到他們想要的內容。
使用 HTML 和 CSS 建立導覽列的方法有多種,其中一些方法如下 -
使用無序列表 (UL)
使用導航標籤
#現在讓我們透過範例詳細了解每種方法。
使用 HTML 和 CSS 建立垂直導覽列的第一種方法是使用無序列表 (UL)。您可以使用無序列表 (UL) 和清單項目 (LI) 並用 CSS 裝飾它們,在 HTML 中製作導覽列。
以下是在 HTML 和 CSS 中使用無序列表 (UL) 建立垂直導覽列的範例。
<!DOCTYPE html> <html> <head> <style> .navbar { background-color: #333; width: 200px; height: 100%; float: left; list-style-type: none; margin: 0; padding: 0; } .navbar li { display: block; } .navbar a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: #111; } </style> </head> <body> <div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
使用 HTML 和 CSS 建立垂直導覽列的第二個方法是使用導覽標籤。 HTML5添加了
以下是使用 HTML 和 CSS 中的導覽標籤建立垂直導覽列的範例。
<!DOCTYPE html> <html> <head> <style> nav { width: 200px; height: 100%; background-color: #333; float: left; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: block; } a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } a:hover { background-color: #111; } </style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
使用 HTML 和 CSS 建立垂直導覽列是一個簡單的過程,可以透過多種方式完成。最常見的方法是使用無序列表 (
以上是如何使用HTML和CSS建立垂直導覽列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!