zoukankan      html  css  js  c++  java
  • 树型列表的实现

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>树型列表的实现</title>
    <style type="text/css">
    <!--
    ul.tree, ul.tree ul 
    {
         list-style-type
    : none;
       
    }

          ul.tree, ul.tree ul 
    {
         list-style-type
    : none;
         background
    : url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
         margin
    : 0;
         padding
    : 0;
       
    }

       
       ul.tree ul 
    {
         margin-left
    : 10px;
       
    }


       ul.tree li 
    {
         margin
    : 0;
         padding
    : 0 12px;
       
    }

          ul.tree, ul.tree ul 
    {
         list-style-type
    : none;
         background
    : url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
         margin
    : 0;
         padding
    : 0;
       
    }

       
       ul.tree ul 
    {
         margin-left
    : 10px;
       
    }


       ul.tree li 
    {
         margin
    : 0;
         padding
    : 0 12px;
         line-height
    : 20px;
         background
    : url(http://www.ximicc.com/attachments/month_0803/n200832013377.jpg) no-repeat;
         color
    : #369;
         font-weight
    : bold;
       
    }

          ul.tree li.last 
    {
         background
    : #fff url(http://www.ximicc.com/attachments/month_0803/0200832013458.jpg) no-repeat;
       
    }

    -->
    </style>
    </head>

    <body>
       
    <ul class="tree">
        
    <li>Animals
         
    <ul>
          
    <li>Birds</li>
          
    <li>Mammals
           
    <ul>
            
    <li>Elephant</li>
            
    <li class="last">Mouse</li>
           
    </ul>
          
    </li>
          
    <li class="last">Reptiles</li>
         
    </ul>
        
    </li>
        
    <li class="last">Plants
         
    <ul>
          
    <li>Flowers
           
    <ul>
            
    <li>Rose</li>
            
    <li class="last">Tulip</li>
           
    </ul>
          
    </li>
          
    <li class="last">Trees</li>
         
    </ul>
        
    </li>
       
    </ul>
    </body>
    </html>

    原文来自:http://www.ximicc.com/article.asp?id=87
  • 相关阅读:
    Ubuntu 指令汇总
    ROS环境下Pointgrey相机的配置方法
    BUG战斗史 —— 日期格式与字符串之间的转换
    Effective Java —— 使类和成员的可访问性最小化
    JDBC和桥接模式
    Effective Java —— 覆盖equals时总要覆盖hashCode
    AutoValue —— Generated immutable value classes
    Effective Java —— 覆盖equals时遵守通用约定
    Effective Java —— try-with-resources 优先于 try-finally
    Effective Java —— 消除过期的对象引用
  • 原文地址:https://www.cnblogs.com/youth0826/p/1233951.html
Copyright © 2011-2022 走看看