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

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

  • 相关阅读:
    007 连接
    006 group by having
    005 运算null 排序 模糊查询 聚合函数
    004 列、distinct、between、in、null
    003 约束和关系
    002 表的概念操作
    5-04用Sql语句创建表
    5-03使用视图创建表
    5-01表达基本概念
    4-04数据库的备份与还原
  • 原文地址:https://www.cnblogs.com/zfang/p/2223739.html
Copyright © 2011-2022 走看看