导航条菜单

Posted 尘埃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航条菜单相关的知识,希望对你有一定的参考价值。

我们在浏览网页时会看到好多种导航菜单,有横向导航菜单、横向二级导航菜单、纵向菜单

通常是使用无序列表来建立导航菜单

1、纵向菜单

如:

<ul>

   <li><a href=‘‘#‘‘>首页</a></li>

   <li><a href=‘‘#‘‘>新闻</a></li>

   ...

</ul>

           在css样式中设置

            ul{
               /*去除导航前的小点*/
               list-style: none;
               width: 100%;
            }
            a{
              text-decoration: none;
            }
           li{
             width: 100px;
             height: 30px;
      line-height:30px;
      background-color: #ccc;
             margin-bottom: 1px;
     /* padding-left: 10px;通常向右移动10px*/
     text-indent: 10px;
    /*文本缩减*/
   }

    现在基本的样式都设置在li标签里了,不太合理;我们对a标签设置就可以了,让a标成一个块级元素

    ul li a{display:block;}

于是,当a标签设置成块级元素时,

 ul{

               /*去除导航前的小点*/
               list-style: none;
               width: 100%;
}

a{

     display:block;

    width: 100px;

      height: 30px;
    line-height:30px;
    background-color: #ccc;
      margin-bottom: 1px;
  /* padding-left: 10px;通常向右移动10px*/
    text-indent: 10px;
  /*文本缩减*/

}

a:hover{

  background-color: #f60;
  color: #fff;

}

以上是关于导航条菜单的主要内容,如果未能解决你的问题,请参考以下文章

导航条——树状导航菜单

导航条——动态改变导航菜单的背景颜色

单击导航条折叠/关闭

bootstrap组件学习之导航条

使用ivx实现菜单导航的经验总结

织梦DedeCMS v5.7 实现导航条下拉菜单