zoukankan      html  css  js  c++  java
  • 垂直导航菜单制作技巧一

    我们导航菜单的制作一般都用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前面添加个性小图标技巧

  • 相关阅读:
    Jmeter配置slave
    Jmeter集合ant进行操作
    PageObject设计模式进行自动化用例的设计方法
    同学,迭代器生成器了解一下
    面向对象的一些方法与属性
    断言与异常
    wtforms-表单生成及验证
    DBUtils--数据库连接池
    Flask请求流程超清大图
    PEP8规范
  • 原文地址:https://www.cnblogs.com/xiaqilin/p/6880152.html
Copyright © 2011-2022 走看看