zoukankan      html  css  js  c++  java
  • 蓝色垂直滑动效果的CSS导航

    蓝色垂直滑动效果的CSS导航

    分类:CSS菜单 时间:2009-6-16 11:34:55 浏览:553 次

    演示效果截图

    蓝色垂直滑动效果的CSS导航

    用到的图片

    
    

    CSS代码

    /* CSS Document */
    img{border:0px;}
    .flt{float:left;}
    .menubg{clear:left; background-color:#6FA9C7; 202px;}
    .menu{float:left; clear:left;
    font:bold 11px Helvetica, Arial, sans-serif;}
    .menu li {margin:0px 0px 0px 0px;list-style:none;}
    .menu a, .menu a:visited {186px;height:22px;
    margin:0px 0px 2px -32px;position:relative;
    display:block;color:#cbe7f5;text-decoration:none;
    background:url(menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;}
    *html .menu a, .menu a:visited {
    186px;height:22px;
    margin:0px 0px 2px -32px;
    position:relative;display:block;
    color:#cbe7f5;text-decoration:none;
    background:url(menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;}
    .menu a:hover, .menu a:active,
    .menu li.current_page_item a,
     .menu li.current_page_item a:visited  {
    background:url(menubg1.jpg) no-repeat;
    text-decoration:none;}	
    .bot{clear:left;}

    HTML代码

    <img src="images/top.jpg" class="top flt" />
    <div class="menubg flt">
    <ul class="menu flt">
    <li class="current_page_item">
    <a href="http://www.865171.cn">Home</a></li>
    <li><a href="http://www.865171.cn">About Us</a></li>
    <li><a href="http://www.865171.cn">Work</a></li>
    <li><a href="http://www.865171.cn">Contact</a></li>
    <li><a href="http://www.865171.cn">Location</a></li>
    <li><a href="http://www.865171.cn">www.865171.cn</a></li>
    </ul>	
    </div>
    <img src="images/bot.jpg" class="bot flt" />
  • 相关阅读:
    squid-正向代理
    SNAT、DNAT、NPT
    tcpdump
    静态路由
    基于状态的iptables
    路由
    firewalld 防火墙
    KVM 快照
    Iptables 防火墙
    老子《道德经》第六十二章
  • 原文地址:https://www.cnblogs.com/luluping/p/1542059.html
Copyright © 2011-2022 走看看