几种DIV+CSS列表制作

作者:天魅日期:2009-11-16

字体大小: 小中大

不多说，自己看代码，之前也发过这些只是只次集中一下，N久没写日志了，真是太忙，让我得罪了好多人。。。感觉在这个世界上消失了

[html]<!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>天魅设计-几种列表DIV+CSS制作</title>

<style>
body{ margin:0; padding:0; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
*{ padding:0; margin:0; list-style:none}
img{border:none}
a{ color:#666; text-decoration:none;}
a:hover{ color:#006699}
.box{ width:700px; margin:auto}
.fgx{ color:#999; padding:10px 0; clear:both; text-align:center}
/* 第一种*/
.products_list{ padding:15px 0; margin-top:10px;}
.products_list li{ float:left; }
.products_list li span{padding:2px; margin:0 5px; display:block; text-align:center}
.products_list li p{ background:url(img/products_bg.gif) no-repeat;display:block; padding:5px; margin:0 5px; width:150px; height:130px; text-align:center; overflow:hidden}

/* 第二种*/
.products_list2{ padding:15px 0; margin-top:10px;}
.products_list2 li{ float:left; }
.products_list2 li span{padding:2px; margin:0 15px; display:block; text-align:center}
.products_list2 li p{ background:url(img/products_bg2.gif) no-repeat;display:block; padding:5px; margin:0 15px; width:130px; height:150px; text-align:center; overflow:hidden}

/* 第三种*/
#wrap {width:700px;margin:10px auto 0 auto;}
#wrap dl {width:678px;margin-bottom:8px;padding:8px;border:1px solid #ddd;}
#wrap dl dt {float:right;width:520px;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:120px;height:90px;margin:2px;border:0;}
#wrap dl dd.pic a:hover {border:1px solid #999;}
#wrap dl dd.text {float:right;width:520px;font-size:12px;line-height:19px;color:#666;text-indent:2em;}
#wrap dl dd.links {float:right;width:520px;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;}
/* 新闻列表样式*/
.list{margin: 0px 10px 20px;text-align: left;    }
.list li{border-bottom:#CCC dotted 1px;width: 680px; font-size:14px}
.list li a{color:#0066CC;display: block; line-height:25px; text-decoration:none}
.list li span{float: right;text-align: right; font-family:"Courier New", Courier, monospace; color:#666}
.list li a:hover{color: #336699; background-color:#EEE; text-decoration:none}

</style>

</head>
<body>
<div class="box">
<div class="fgx">------------------------------------------------------第一种--------------------------------------------------------------</div>
<ul class="products_list">
    <li><p><a href="#"><img src="images/pr2.gif" width="150" height="130" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr2.gif" width="150" height="130" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr2.gif" width="150" height="130" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr2.gif" width="150" height="130" /></a></p><span><a href="#">产品名</a></span></li>
</ul>

<div class="fgx">------------------------------------------------------第二种--------------------------------------------------------------</div>

<ul class="products_list2">
    <li><p><a href="#"><img src="images/pr.gif" width="130" height="150" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr.gif" width="130" height="150" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr.gif" width="130" height="150" /></a></p><span><a href="#">产品名</a></span></li>
    <li><p><a href="#"><img src="images/pr.gif" width="130" height="150" /></a></p><span><a href="#">产品名</a></span></li>
</ul>

<div class="fgx">------------------------------------------------------第三种--------------------------------------------------------------</div>

<div id="wrap">
    <dl>
        <dt><a href="http://www.tmxhx.com/" target="_blank">这里是标题</a></dt>
        <dd class="pic"><a href="#"><img src="images/pr2.gif" alt="1" /></a></dd>
        <dd class="text">这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品…</dd>
        <dd class="links"><a href="#">来自35</a> <a href="#" target="_blank">点击访问</a></dd>
    </dl>
        <dl>
        <dt><a href="http://www.tmxhx.com/" target="_blank">标题</a></dt>
        <dd class="pic"><a href="#"><img src="images/pr2.gif" alt="1" /></a></dd>
        <dd class="text">                        这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品,这边是简短说明，可以新闻也可以做产品…</dd>
        <dd class="links"><a href="#">来自35</a> <a href="#" target="_blank">点击访问</a></dd>
    </dl>

<div class="fgx">------------------------------------------------------新闻列表--------------------------------------------------------------</div>

<ul class="list">
<li><span>2008-8-6 </span><a href="#">Particle illusion 3.01影视效果制作软件</a></li>
<li><span>2008-7-5 </span><a href="#">Ulead COOL 3D 3.5 (不懂3D照做3D的软件)</a></li>
<li><span>2008-7-4 </span><a href="#">Sothink SWF Decompiler   SWF破解工具</a></li>
</ul>

</div>

</div>
</body>
</html>
[/html]