• 海豚色水平CSS导航菜单,挺实用


    演示效果截图

     海豚色水平CSS导航菜单

    用到的图片

     

    CSS代码

    #dolphincontainer{position:relative;height:56px;color:#E0E0E0;
    background:#143D55;100%;
    font-family:Helvetica,Arial,Verdana,sans-serif;}
    #dolphinnav{position:relative;height:33px;font-size:12px;
    text-transform:uppercase;font-weight:bold;
    background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;
    padding:0 0 0 20px;}
    #dolphinnav ul{margin:0;padding:0;list-style-type:none;
    auto;float:left;}
    #dolphinnav ul li{display:block;float:left;margin:0 1px;}
    #dolphinnav ul li a{display:block;float:left;color:#EAF3F8;
    text-decoration:none;padding:0 0 0 20px;height:33px;}
    #dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;
    float:left;}
    #dolphinnav ul li a:hover{color:#fff;
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
    #dolphinnav ul li a:hover span{display:block;auto;cursor:pointer;}
    #dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
    color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) 
    no-repeat top left;line-height:275%;}
    #dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;
    auto;background:#1D6893 url(images/dolphin_right-ON.gif) 
    no-repeat top right;height:33px;}

    HTML代码

    <div id="dolphincontainer">
    <div id="dolphinnav">
    <ul>
    <li><a href="http://www.865171.cn"><span>Home</span></a></li>
    <li><a href="http://www.865171.cn" class="current">
    <span>www.865171.cn</span></a></li>
    <li><a href="http://www.865171.cn"><span>Services</span></a></li>
    </ul>
    </div>
    </div>
  • 相关阅读:
    HTML5边玩边学
    全面理解javascript的caller,callee,call,apply概念
    什么是HTTP Headers?
    Jquery的$命名冲突:
    jQuery 核心 noConflict() 方法
    js 两个小括号 ()() 的用法
    前端工程师的编码遭遇战
    Canvas之图像与文字
    Internet Explorer 9.0 新功能介绍
    firebug1.7调试实用技巧指南—web前端开发七武器
  • 原文地址:https://www.cnblogs.com/luluping/p/1542077.html
Copyright © 2020-2023  润新知