zoukankan      html  css  js  c++  java
  • CSS导航菜单不使用图像圆角菜单

    前面我们做的圆角菜单都是使用图片来完成得,有局限性。下面介绍一种纯使用css完成的菜单。

    1,搭建基本的HTML代码

    <body>

    <ul>

           <li class="item">

               <a href="#">

            <div class="row1"></div><div class="row2"></div>

            <div class="row3"></div><div class="row4"></div>

            <p>Home</p>

            </a>

        </li>

               <li class="item">

               <a href="#">

            <div class="row1"></div><div class="row2"></div>

            <div class="row3"></div><div class="row4"></div>

            <p>Contact Us</p>

            </a>

        </li> <li class="item">

               <a href="#">

            <div class="row1"></div><div class="row2"></div>

            <div class="row3"></div><div class="row4"></div>

            <p>Web Dev</p>

            </a>

        </li> <li class="item">

               <a href="#">

            <div class="row1"></div><div class="row2"></div>

            <div class="row3"></div><div class="row4"></div>

            <p>Web Design</p>

            </a>

        </li> <li class="item">

               <a href="#">

            <div class="row1"></div><div class="row2"></div>

            <div class="row3"></div><div class="row4"></div>

            <p>Wap</p>

            </a>

        </li>

    </ul>

     </body>

    对于CSS得设置,如下

    首先一些常规的设置:

    ul{
     height:26px;
     margin:0;
     padding:10px;
     list-style-type:none;
     background:#ddd;
    }
    .item{
     float:left;
     100px;
     margin:0 -1px 0 0;
     padding:0;
     font:14px Arial, Helvetica, sans-serif;
     font-weight:bold;
    }

    然后对P段落进行设置:

    .item p{
     padding:0 0 2px 0;
     margin:0px;
     text-align:center;
     background:#cc6;
     border:solid 1px #000;
     border-top-0;
    }

    下面对构成四个角的div进行设置:

    .item div{
     height:1px;
     overflow:hidden;
     background:#cc6;
     border-left:solid 1px #000;
     border-right:solid 1px #000;
    }
    .item .row1{
     margin:0 5px;
     background:#000;
    }
    .item .row2{
     margin:0 3px;
     border:0 2px;
    }
    .item .row3{
     margin:0 2px;
    }
    .item .row4{
     margin:0 2px;
     height:2px;
    }

    接着设置鼠标响应效果:

    .item a,.item a:visted{
     color:#000;
     text-decoration:none;
    }
    .item a:hover p{
     background:#884;
     color:#fff;
    }
    .item a:hover .row2,.item a:hover .row3,.item a:hover row4{
     background:#884;
    }
    .item a:hover{
     background:transparent;
    }

    这样就完成了最后的效果了

  • 相关阅读:
    C++11 std标准库chrono获取系统时间戳
    求取激光光斑质心
    Windows多网卡UDP广播问题
    IP地址分类
    C++各种时间的含义、区别和相互转换
    MFC中控件显示提示信息tooltip
    IP地址 网关 子网掩码之间的关系
    MFC动态添加菜单选项
    opencv函数学习:rotate()的使用
    opencv函数学习:flip()的使用
  • 原文地址:https://www.cnblogs.com/zfang/p/2223739.html
Copyright © 2011-2022 走看看