dl,dd制作grid

通过dl和dd标签制作grid，可以和li标签一样的效果;用来呈现复杂的下拉菜单栏目非常合适，代码更加简介和高效。

example:code

<style>
    /*common*/
    *{margin:0;padding:0;}
    body{ color:#000000;background:#fff;font:12px/px "微软雅黑", sans-serif; text-align:center;}
    body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr{ margin:0; padding:0;}
    input,select{ font-size:12px; vertical-align:middle;}
    li{list-style-type:none;}
    img{border:0 none;}
    a{color:white; text-decoration:none;}
    /*dl-grid*/
    #allnav{
        width:1500px;
        display:block;
        height:360px;
        background:#CCC;
        padding-top:30px;
        border:5px outset #1cdddf;
        
        }
    #allnav dl{
        width:1500px;
        height:260px;
        }
    #allnav dd{
        width:160px;
        height:139px;
        text-align:center;
        float:left;
        margin-left:5px;
        }
    #allnav dd img{
        width:65px;
        height:65px;
        }
    /*a标签*/
    #allnav dd p{
        padding:12px;
        }
    #allnav dd p:hover{color:#6C6;}
    
</style>

<div id="allnav" role="container">
           <dl role="grid-container">
                <dd>
                   <a href="#"><img src="/images/all01.png"/>
                       <p>this is txt</p>
                   </a>
                </dd>
                <dd>
                   <a href="#"><img src="/images/all02.png"/>
                       <p>this is txt</p>
                   </a>
                </dd>
                <dd>
                   <a href="#"><img src="/images/all03.png"/>
                       <p>this is txt</p>
                   </a>
                       
                </dd>
                <dd>
                   <a href="#"><img src="/images/all04.png"/>
                       <p>this is txt</p>
                   </a>
                       
                </dd>
                <dd>
                   <a href="#"><img src="/images/all05.png"/>
                       <p>this is txt</p>
                   </a>
                       
                </dd>
                <dd>
                   <a href="#"><img src="/images/all06.png"/>
                       <p>this is txt</p>
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all07.png"/>
                        <p>this is txt</p>
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all09.png"/>
                        <p>this is txt</p> 
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all10.png"/>
                        <p>this is txt</p> 
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all11.png"/>
                        <p>this is txt</p>
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all12.png"/>
                        <p>this is txt</p> 
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all13.png"/>
                        <p>this is txt</p>    
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all14.png"/>
                        <p>this is txt</p>
                   </a>
                        
                </dd>
                <dd>
                   <a href="#"><img src="/images/all17.png"/>
                       <p>this is txt</p>  
                   </a>
                       
                </dd>
           </dl>
      </div>