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 p {
      display: none
    }   
    #navsite {   
      font-family:Verdana, Arial, Helvetica, sans-serif;   
      font-size:0.7em;   
      font-weight:bold;   
      12em;   
      border-right:1px solid #666;   
      padding:0;   
      margin-bottom:1em;   
      background-color:#9cc;   
      color:#333;   
    }   
    #navsite ul {   
      list-style:none;   
      margin:0;   
      padding:0;   
    }   
    #navsite ul li {   
      margin:0;   
      border-top:1px solid #003;   
    }   
    #navsite ul li a {   
      display:block;   
      padding:2px 2px 2px 0.5em;   
      border-left:10px solid #369;   
      border-right:1px solid #69c;   
      border-bottom:1px solid #369;   
      background-color:#036;   
      color:#fff;   
      text-decoration:none;   
      100%;   
    }   
    html>body #navsite ul li a {   
      auto;   
    }   
    #navsite ul li a:hover {   
      border-left:10px solid #036;   
      border-right:1px solid #69c;   
      border-bottom:1px solid #369;   
      background-color:#69f;   
      color:#fff;   
    }   
    --></style>
    </head>  
    <body>  
    <div id="navsite">  
      <p>Site navigation:</p>  
      <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>
    
  • 相关阅读:
    CSS div 塌陷问题
    jquery 选择器包含特殊字符
    ASP.NET Core Action 读取流
    SQL 列拼接使用
    bootstrap div 固定
    Jquery 操作HTML5自定义属性data-*
    Vue 页面加载闪现代码问题
    iframe 加载完成事件
    closest
    【开发者的精进】 数据驱动下的程序设计
  • 原文地址:https://www.cnblogs.com/litou/p/2227849.html
Copyright © 2011-2022 走看看