• 【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>
    
  • 相关阅读:
    ElasticSearch 2 (1)
    Vagrant (2) —— 基本安装与配置(下)
    Vagrant (1) —— 基本安装与配置(上)
    Vagrant (3) —— 复制/备份Vagrant Box
    vue中$forceUpdate的使用
    vue+ElementUi 选择框选中之后翻页进行状态保持及默认选中
    loonflow 工单系统
    一些后端知识
    前端学习计划
    async/await函数的执行顺序的理解
  • 原文地址:https://www.cnblogs.com/litou/p/2227849.html
Copyright © 2020-2023  润新知