码迷,mamicode.com
首页 > 其他好文 > 详细

导航条菜单

时间:2016-10-22 00:37:04      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:hover   移动   padding   style   text   ati   导航   元素   nbsp   

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

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

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;

}

导航条菜单

标签:hover   移动   padding   style   text   ati   导航   元素   nbsp   

原文地址:http://www.cnblogs.com/hq123/p/5983075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!