大部分站长在制作网站的过程中都遇到过产品展示效果,就是上面是产品图片,下面是产品名称,这种用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>
#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去截取字符串。
如还有疑问可以在线咨询青岛星网技术。