导航条菜单

Posted 2020-08-15 尘埃

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

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

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;

}