zoukankan      html  css  js  c++  java
  • css学习2----css动态菜单

    这里是一个没有用table标签的动态效果菜单:

    代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>test4_css.html</title>
     
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      

      <link rel="stylesheet" href="../css/test4_css.css" type="text/css"></link></head>
     
      <body>
      <div id="navigation">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">WEATHER</a></li>
        <li><a href="#">CONTACTS</a></li>
      </ul> 
      </div>
      </body>
    </html>

    css代码:

    body{
      border-color: #ffdee0;
     
    }
    #navigation{
       200px;
       font-family: Arial;
      
    }
    #navigation ul{
     list-style-type: none;  /* 去掉项目符号*/
     margin: 0px;
     padding:0px;
     }
     
    #navigation li{
     border-bottom: 1px solid #ed9f9f; /* 添加下划线 */
     
     }
    #navigation li a{
     display: block; /* 区块显示 */
     padding: 5px 5px 5px 0.5em;
     text-decoration: none;
     border-left: 12px solid #711515;
     border-right: 1px solid #711515;
     }
    #navigation li a:link, #navigation li a:visited:visited {  /*正常连接*/
     background-color: #c11136;
     color: #ffffff;
     
    }
    #navigation li a:hover{  /*鼠标经过时*/
     background-color: #990020;
     color: #ffff00;
     }

  • 相关阅读:
    月亮,还是馅饼(2)
    月亮,还是馅饼(1)
    spread 论坛
    kaok website
    提升 .NET 程序性能的 一些 原则
    sql convert
    sql 中 MSDTC 不可用。
    判断sql执行所花的时间(精度为毫秒)
    35岁以前成功的12条黄金法则
    快速删除表中的数据
  • 原文地址:https://www.cnblogs.com/alaricblog/p/3278321.html
Copyright © 2011-2022 走看看