zoukankan      html  css  js  c++  java
  • CSS菜单立体菜单

    本案例仍然使用和上一个案例相同的HTML结构,基本HTML代码如下:

    <body>
    <div id="menu">
    <a href="#">Home</a>
    <a href="#">Contact Us</a>
    <a href="#">Web Dev</a>
    <a href="#">Web Design</a>
    <a href="#">Map</a>
    </div>
    </body>

    对于#menu容器设置如下:

    #menu {
        font-family:Arial, Helvetica, sans-serif;    /*字体*/
        font-size:14px;                            /*字号*/
    }

    菜单项的普通状态设置,代码如下:

    #menu a,#menu a:visited {
        text-decoration:none;            /*设置下滑线*/
        text-align:center;                /*文字水平居中*/
        color:#fff;                        /*白色文字*/
        display:block;                    /*设置块级元素*/
        10em;                        /*宽度*/
        padding:0.25em;                    /*内边距*/
        margin:0.5em auto;                /*菜单项之间间隔0.5em,并水平居中*/
        background-color:#8ab;            /*背景色*/
        border:2px solid #fff;            /*边框*/
        border-color:#def #678 #345 #cde;   /*边框颜色显示突起效果*/
        position:relative;                /*使用相对定位*/
    }

      position:relative;                /*使用相对定位*/

    注意  所谓相对定位,是指类似定位元素自身所在的位置为基准,平移制定的距离。


    #menu a:hover{
        top:2px;                        /*向下移动两像素*/
        left:2px;                        /*向右移动两像素*/
        border-color:#345 #cde #def #678;        /*边框颜色显示凹陷效果*/
    }

    到这在浏览器中显示效果如图:

    “top:2px” 的含义是,距离上界2个像素。由于原来鼠标指针未经过时,距离上界时0像素,因此产生的效果就是向下移动了2个像素。一次类推,“left:2px” 的效果是向右移动2个像素。由于前面已经设定定位方式为相对定位,因此这里的移动式以自身原来的位置为基准进行的。

    为了实现凹陷的视觉效果,需要将上下边框的颜色交换,左右边框的颜色交换。这样,这个立体菜单的效果就完成了。



  • 相关阅读:
    MSSQL复制表
    分享职场心得《7》
    分享职场心得《2》
    分享职场心得《3》
    免费收录网站搜索引擎登录入口最新版
    读写分离,读写分离死锁解决方案
    分享职场心得《5》
    分享职场心得《6》
    分享职场心得《1》
    分享职场心得《4》
  • 原文地址:https://www.cnblogs.com/zfang/p/2195110.html
Copyright © 2011-2022 走看看