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个像素。由于前面已经设定定位方式为相对定位,因此这里的移动式以自身原来的位置为基准进行的。

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



  • 相关阅读:
    布局重用 include merge ViewStub
    AS 常用插件 MD
    AS 2.0新功能 Instant Run
    AS .ignore插件 忽略文件
    AS Gradle构建工具与Android plugin插件【大全】
    如何开通www国际域名个人网站
    倒计时实现方案总结 Timer Handler
    AS 进行单元测试
    RxJava 设计理念 观察者模式 Observable lambdas MD
    retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】
  • 原文地址:https://www.cnblogs.com/zfang/p/2195110.html
Copyright © 2011-2022 走看看