html5 侧边栏【代码示例】

HTML5侧边栏是网页中常用的布局元素，可以用于展示导航菜单、相关链接或其他重要信息。通过使用HTML5的语义化标签和CSS样式，我们可以轻松地创建一个侧边栏。

我们需要使用HTML5的<aside>标签来定义侧边栏的容器。在<aside>标签内部，我们可以添加其他HTML元素，例如<ul>标签来创建一个无序列表，用于展示导航菜单。

示例代码如下：

<aside>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</aside>

接下来，我们可以使用CSS样式来对侧边栏进行布局和美化。可以为<aside>标签设置宽度、背景颜色、边框等样式，以及为<ul>标签内的<li>标签设置间距、背景颜色、鼠标悬停效果等样式。

示例代码如下：

<style>
  aside {
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
  }
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li {
    padding: 10px;
    background-color: #fff;
  }
  li:hover {
    background-color: #f9f9f9;
  }
  a {
    text-decoration: none;
    color: #333;
  }
</style>

通过以上代码，我们创建了一个宽度为200px的侧边栏，背景颜色为浅灰色，带有1px的边框。导航菜单以无序列表形式展示，每个菜单项有10px的内边距和白色背景，鼠标悬停时背景颜色变为浅灰色。链接文字使用默认的黑色。

通过这样的HTML5侧边栏布局，我们可以方便地在网页中添加导航菜单或其他重要信息，使网页更加直观和易于导航。