zoukankan      html  css  js  c++  java
  • 【CSS】CSS Cookbook例子:创建水平导航菜单

    感觉效果是不错的

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <style type="text/css"><!--   
    #navsite h5 {
      display: none
    }   
    #navsite ul {   
      padding:3px 0;   
      margin-left:0;
      border-bottom:1px solid #778;
      font:bold 12px Verdana,sans-serif;
    }
    #navsite ul li {   
      list-style:none;
      margin:0;   
      display:inline;
    }   
    #navsite ul li a {   
      padding:3px 0.5em;
      margin-left:3px;
      border:1px solid #778;
      border-bottom:none;
      background:#dde;
      text-decoration:none;
    }   
    #navsite ul li a:link{
      color:#448;
    }
    #navsite ul li a:visited{
      color:#667;
    }
    #navsite ul li a:link:hover,#navsite ul li a:visited:hover {   
      color:#000;
      background:#aae;
      border-color:#227;
    }
    #navsite ul li a#current {
      background:white;
      border-bottom:1px solid white;
    }
    --></style>
    </head>  
    <body>  
    <div id="navsite">  
      <h5>Site navigation:</h5>  
      <ul>  
        <li><a href="/">Home</a></li>  
        <li><a href="/about/">About</a></li>  
        <li><a href="/archives/">Archives</a></li>  
        <li><a href="/writing/">Writing</a></li>  
        <li><a href="/speaking/">Speaking</a></li>  
        <li><a href="/Contact/">Contact</a></li>  
      </ul>  
    </div>  
    </body>  
    </html>
    
  • 相关阅读:
    c# 之 事务
    Asp.Net 之 js/jquery获取服务器端控件
    产品能力框架图
    软件测试职业发展规划图
    Loadrunner 工作原理图
    Linux内核性能测试工具全景图
    Linux 性能监控分析
    软件藏宝图
    Haproxy 8种算法+Session共享
    Keepalived+Haproxy实现高可用负载均衡
  • 原文地址:https://www.cnblogs.com/litou/p/2227847.html
Copyright © 2011-2022 走看看