• 2009-06-15

    用ul和li实现细线表格(兼容ie&ff&opera) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/41038760.html

    写了一段代码,用ul+li完全模拟细线table。存档。
    样式参考链接:http://xcf007.blog.51cto.com/471707/107717

    <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>用ul和li实现细线表格</title> 
    <style type="text/css"> 


    margin:0px; 
    padding:0px; 
    font-family:'宋体'; 
    font-size:12px; 
    line-height:12px; 



    color:#666; 
    text-decoration:none; 

    html 

    overflow:auto; 

    ul 

    width:808px; 
    margin:0px auto; 
    border-top:1px solid gray;
    border-right:1px solid gray; 
    vertical-align:bottom;

    ul.b_ul 

    border-bottom:1px solid gray; 

    div{ text-decoration:none; } 
    li{list-style:none;_display:inline-block;overflow:hidden;margin:0px;background:yellow} 
    li a{display:block; float:left;width:200px; line-height:20px;text-align:center; border-left:1px solid gray;margin:0px} 
    li a:hover{text-decoration:underline;} 
    </style> 
    </head> 
    <body> 
    <center>用ul和li实现细线表格</center>
      <div> 
      <ul><li><a href="">1111 1111 1111 1111</a><a href="">2222</a><a href="">3333 3333 3333 3333 3333 3333 3333 3333 </a><a href="">4444</a></li></ul>
     <ul><li style="background:lightgreen"><a href="">5555</a><a href="">6666 6666 6666 6666 6666 6666 6666 6666 6666 6666</a><a href="">7777 7777 7777 7777 7777</a><a href="">8888</a></li></ul>
     <ul class=b_ul><li><a href="">9999</a><a href="">0000</a><a href="">1111</a><a href="">2222 2222 2222 2222 2222 2222</a></li></ul> 
      </div> 
    </body>
    <script>
    for(i=0;i<document.getElementsByTagName("ul").length;i++)
    {
    h=document.getElementsByTagName("ul")[i].offsetHeight;
    for(j=0;j<document.getElementsByTagName("ul")[i].childNodes[0].childNodes.length;j++)
    if(document.getElementsByTagName("ul")[i].childNodes[0].childNodes[j].tagName=="A")
    {
    document.getElementsByTagName("ul")[i].childNodes[0].childNodes[j].style.height=h+"px";
    }
    }
    </script> 
    </html>

    分享到:

    历史上的今天:

    世界杯 2006-06-15