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;
    }

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

  • 相关阅读:
    初识 Umbraco CQ
    程序员的利器SourceInsight CQ
    关于Hg的文件过滤 CQ
    蓝桥杯 基本内容
    leedswriting符号
    tiny mission 2021 11 15
    拓扑排序+二分答案+建图
    mission 11.24
    高数积分求面积
    高数积分求弧长
  • 原文地址:https://www.cnblogs.com/zfang/p/2223739.html
Copyright © 2011-2022 走看看