HTML5設置側邊欄導航 HTML5是現代Web開發的重要技術之一，本文將介紹如何使用HTML5設置側邊欄導航，以實現優秀的用戶體驗。 在HTML5中，我們可以使用nav標簽來定義導航欄。同時，為了設置側邊欄，我們需要使用aside標簽。下面是一個基本的HTML結構：

<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>
<aside>
<h2>Popular Categories</h2>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
</ul>
</aside>

在上述代碼中，我們定義了一個nav標簽和一個aside標簽。在nav標簽中，我們使用ul和li標簽來定義導航欄的選項。在aside標簽中，我們使用h2和ul標簽來定義側邊欄的標題和選項。 接下來，我們需要使用CSS樣式來設置導航欄和側邊欄的樣式。下面是一個基本的CSS樣式：

nav {
float: left;
width: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
margin: 0;
padding: 0;
}
nav a {
display: block;
color: #222;
padding: 10px 15px;
text-decoration: none;
font-size: 18px;
border-bottom: 1px solid #ccc;
}
nav a:hover {
background-color: #f8f8f8;
}
aside {
float: left;
width: 20%;
}
aside h2 {
font-size: 18px;
font-weight: bold;
}
aside ul {
margin: 0;
padding: 0;
list-style-type: none;
}
aside li {
margin: 0;
padding: 0;
}
aside a {
display: block;
color: #222;
padding: 5px 10px;
text-decoration: none;
}
aside a:hover {
background-color: #f8f8f8;
}

在上述CSS樣式中，我們設置了nav標簽和aside標簽的浮動、寬度、邊距和內邊距等屬性。我們還設置了選項的字體樣式，背景樣式和邊框樣式。 通過上述HTML和CSS代碼，我們已經成功設置了一個簡單的側邊欄導航。但在實際應用中，我們還可以進一步優化側邊欄的樣式和布局。 總結 HTML5提供了很多實用的標簽和屬性，可以幫助我們更快更方便地開發Web應用程序。通過合理應用nav和aside標簽，我們可以實現一個優秀的側邊欄導航，為我們的用戶提供優質的用戶體驗。