div+css制作产品展示效果

大部分站长在制作网站的过程中都遇到过产品展示效果，就是上面是产品图片，下面是产品名称，这种用table来做的话就很简单了，直接画一个2行数列的表格即可，但是用div+css来做的时候怎么实现这种效果呢？编程之家(www.qdxw.net)下面为大家详细介绍下。

不叨叨，先上效果图如下：

我们可以把他当做一个无序列表来做就简单多了，看代码：

<div id="anlidesc">
<ul>
<li><a href="#" target="_blank"><img src="1.gif" alt="编程之家" /></a><span><a href="#" target="_blank"<编程之家</a></span></li>
<li><a href="#" target="_blank"><img src="1.gif" alt="编程之家" /></a><span><a href="#" target="_blank">编程之家</a></span></li>
<li><a href="#" target="_blank"><img src="1.gif" alt="编程之家" /></a><span><a href="#" target="_blank">编程之家</a></span></li>
<li><a href="#" target="_blank"><img src="1.gif" alt="编程之家" /></a><span><a href="#" target="_blank">编程之家</a></span></li>
</ul>
</div>

以下是CSS代码片段

#anlidesc{ width:721px; height:150px;}
#anlidesc ul{ margin-top:10px;}
#anlidesc ul li{ width:155px; height:135px; float:left; margin-left:20px; display:inline;}
#anlidesc li a { display:block;}
#anlidesc li a img { width:153px; height:107px; border:1px solid #DDDDDD; padding:1px;}
#anlidesc li a:hover img{ border:1px solid #70a4df;}
#anlidescli span a {width:155px;height:26px;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis;
 overflow: hidden;}

经过上面的样式之后就完全实现了产品展示效果！是不是很简单。这里重点说一下CSS代码里的：text-overflow:ellipsis; 这个属性，意思是当文字超过了span a的宽度的时候自动显示…。好处是在源文件里文字是完整的，利于SEO优化！不建议大家使用程序left去截取字符串。

如还有疑问可以在线咨询编程之家技术。