HTML5設置水平導航欄教程
在網站中添加導航欄是非常重要的，它可以幫助訪問者快速找到自己需要的信息。下面我們將介紹如何使用HTML5設置水平導航欄。
1.創建HTML文件，并編寫導航欄所需的HTML代碼。HTML代碼如下：
<nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">服務項目</a></li> <li><a href="#">新聞資訊</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav>2.在CSS文件中編寫樣式代碼。為了讓導航欄水平設置，我們需要為導航欄設置display: inline-block;并且去掉了默認的樣式。
nav {
background: #333;
height: 40px;
display: block;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 10px;
text-decoration: none;
}
nav li:hover {
background: #7b0000;
}3.在HTML文件中添加CSS鏈接。<head> <link href="styles.css" rel="stylesheet"> </head>4.保存文件并在瀏覽器中預覽。 通過以上步驟，您已經可以成功地創建一個水平導航欄。通過添加更多的樣式和鏈接，可以使導航欄更加美觀和實用。希望本篇文章能對您學習HTML5有所幫助。