垂直导航菜单制作技巧一

Posted 2020-09-19

我们导航菜单的制作一般都用ul li  a这几个标签，但是我们可以思考一个问题，这个a标签是一个行内标签，而ul 和li是块级标签，我们写在li上面的样式可以写在最里面的a上面

html代码如下：

1 <ul>
2     <li><a href="">菜单1</a></li>
3     <li><a href="">菜单2</a></li>
4     <li><a href="">菜单3</a></li>
5     <li><a href="">菜单4</a></li>
6     <li><a href="">菜单5</a></li>
7 </ul>

我们常规的css做法就是

<style type="text/css">
    * {
        margin: 0;
        padding: 0;    
        font-size: 14px;
    }
    ul {
        list-style: none;
        width: 100px;
        margin: 0 auto;
    }
    ul li {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #CCC;
        margin-bottom: 1px;
        text-indent: 10px;
    }
    ul li a {
        text-decoration: none;
    }
</style>

而我想表达的就是  li标签上的样式可以全部放到a标签上写     只要给a标签加上  display:block;  让a标签变成块级元素即可。

这样做的好处是，在做hover交互效果时，处理起来比较方便。

修改后的代码如下：

 

<style type="text/css">
    * {
        margin: 0;
        padding: 0;    
        font-size: 14px;
    }
    ul {
        list-style: none;
        width: 100px;
        margin: 0 auto;
    }
    ul li a {
        display: block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #CCC;
        margin-bottom: 1px;
        text-indent: 10px;
        text-decoration: none;
    }
    ul li a:link,ul li a:visited {
        color: #000;
    }
    ul li a:hover, ul li a:active {
        color: #FFF;
        background: green;
    }
</style>

 hover和avtive平时设置成一样的就好，link和visited设置成一样的

在li前面添加个性小图标技巧