定义列表dl打造图文并茂的CSS列表元素

    <div>
        <p><a href="#"><img src="1.jpg" alt="1" /></a></p>
        <h3><a href="#">Div+CSS教程 大量的CSS布局的相关知识</a></h3>
        <p>这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</p>
        <span><a href="#">功能链接</a> <a href="#">点击访问</a></span>
    </div>

    <dl>
        <dt><a href="#">Div+CSS教程 大量的CSS布局的相关知识</a></dt>
        <dd class="pic"><a href="#"><img src="1.jpg" alt="1" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="#">点击访问</a></dd>
    </dl>

<div id="wrap">
    <dl>
        <dt><a href="http://www.xxcss.com/default.asp?cateID=3" target="_blank">Div+CSS教程 大量的CSS布局的相关知识</a></dt>
        <dd class="pic"><a href="#"><img src="1.jpg" alt="1" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/default.asp?cateID=3" target="_blank">点击访问</a></dd>
    </dl>
    <dl>
        <dt><a href="http://www.xxcss.com/default.asp?cateID=9" target="_blank">CSS布局实例 是一个展示平台 内容丰富</a></dt>
        <dd class="pic"><a href="#"><img src="2.jpg" alt="2" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/default.asp?cateID=9" target="_blank">点击访问</a></dd>
    </dl>
    <dl>
        <dt><a href="http://www.xxcss.com/default.asp?cateID=5" target="_blank">CSS2.0教程 专攻CSS会让您有很多收获</a></dt>
        <dd class="pic"><a href="#"><img src="3.jpg" alt="3" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/default.asp?cateID=5" target="_blank">点击访问</a></dd>
    </dl>
    <dl>
        <dt><a href="http://www.xxcss.com/css_websites_showcase/" target="_blank">CSS酷站欣赏 名站酷站可以让您看到很多案例</a></dt>
        <dd class="pic"><a href="#"><img src="4.jpg" alt="4" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/css_websites_showcase/" target="_blank">点击访问</a></dd>
    </dl>
    <dl>
        <dt><a href="http://www.xxcss.com/css_template/" target="_blank">CSS模板下载 学习可以先从模仿开始</a></dt>
        <dd class="pic"><a href="#"><img src="5.jpg" alt="5" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/css_template/" target="_blank">点击访问</a></dd>
    </dl>
    <dl>
        <dt><a href="http://www.xxcss.com/css/" target="_blank">CSS在线手册 遇到不懂的属性可以看看手册</a></dt>
        <dd class="pic"><a href="#"><img src="6.jpg" alt="6" /></a></dd>
        <dd class="text">这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。这里是对内容的索引与描述。</dd>
        <dd class="links"><a href="#">功能链接</a> <a href="http://www.xxcss.com/css/" target="_blank">点击访问</a></dd>
    </dl>
</div>

* {
    margin:0;
    padding:0;
}
body {
    background:#fff;
}
#wrap {
    width:502px;
    margin:10px auto 0 auto;
}

#wrap dl {
    width:480px;
    margin-bottom:8px;
    padding:8px;
    border:1px solid #ddd;
}

#wrap dl dt {
    float:right;
    width:366px;
    height:22px;
}
#wrap dl dt a {
    font-size:13px;
    font-weight:800;
    color:#06c;
    text-decoration:none;
}
#wrap dl dt a:hover {
    text-decoration:underline;
}

#wrap dl dd.pic {
    float:left;
}
#wrap dl dd.pic a {
    display:block;
    border:1px solid #ddd;
}
#wrap dl dd.pic a img {
    width:100px;
    height:86px;
    margin:2px;
    border:0;
}
#wrap dl dd.pic a:hover {
    border:1px solid #999;
}

#wrap dl dd.text {
    float:right;
    width:366px;
    font-size:12px;
    line-height:19px;
    color:#666;
    text-indent:2em;
}

#wrap dl dd.links {
    float:right;
    width:366px;
    margin-top:-6px;
    text-align:right;
}
#wrap dl dd.links a {
    font-size:12px;
    line-height:15px;
    color:#06c;
    text-decoration:none;
}
#wrap dl dd.links a:hover {
    text-decoration:underline;
}

#wrap dl:after {
    content:"."; 
    display:block;
    height:0; 
    clear:both; 
    visibility:hidden;
}