css3 html5竖导航栏

在现代网页设计中，竖导航栏成为了一个常见的布局元素，它有利于网站导航的排版和展示。CSS3和HTML5提供了更多的样式和功能，使得竖导航栏更加美观和实用。

HTML5代码示例nav class="vertical-nav">
      ul>
        li>
    a href="#">
    Home/a>
    /li>
        li>
    a href="#">
    About Us/a>
    /li>
        li>
    a href="#">
    Services/a>
    /li>
        li>
    a href="#">
    Gallery/a>
    /li>
        li>
    a href="#">
    Contact Us/a>
    /li>
      /ul>
    /nav>

使用HTML5语义化标签nav来包裹整个竖导航栏，ul和li用来定义列表元素和子项。我们可以给nav和ul设置一些基础样式，比如padding、margin和背景色等。

CSS3代码示例.vertical-nav {
      background-color: #f9f9f9;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.vertical-nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
}
.vertical-nav li {
      margin: 10px 0;
}
.vertical-nav a {
      display: block;
      padding: 10px;
      border-radius: 5px;
      color: #333;
      text-decoration: none;
      transition: background-color 0.3s ease;
}
.vertical-nav a:hover {
      background-color: #333;
      color: #fff;
}
    

在CSS3中，我们可以给竖导航栏设置更加美观的样式。我们给ul设置了list-style-type:none来去除默认的圆形标记，给li设置了外边距来增加子项之间的距离。a标签的display:block让它们成为一个块元素，padding、border-radius和transition让它们更加美观和实用。另外，我们还可以给a:hover设置样式，让鼠标经过时颜色变化，增加交互性。

综上所述，CSS3和HTML5提供了更多的样式和功能，使得竖导航栏更加美观和实用。通过上述的代码示例，我们可以轻松地创建一个漂亮的竖导航栏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！