CSS 图片列表,横向

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>CSS 图片列表,横向</title> 

<style type="text/css"> 

<!-- 

* { 

margin:0; 

padding:0; 

font-size:12px; 

text-decoration:none; 

#products { 

width:560px; 

margin:50px auto; 

#products li { 

width:110px; 

height:154px; 

float:left; 

margin-left:30px; 

display:inline; 

#products li a { 

display:block; 

#products li a img { 

border:1px solid #666; 

padding:1px; 

#products li span a { 

width:110px; 

height:30px; 

line-height:24px; 

text-align:center; 

white-space:nowrap; 

text-overflow:ellipsis; 

overflow: hidden; 

--> 

</style> 

</head> 

<body> 

<ul id="products"> 

<li><a href="#"><img src="http://files.jb51.net/upload/2010-3/20100303232223253.jpg" alt="" width="100" 

height="75"/></a> 

<span><a href="#">VB定时关机源码示例</a></span> 

</li> 

<li><a href="#"><img src="http://files.jb51.net/upload/2010-3/20100303232225693.jpg" alt="" width="100" 

height="75"/></a><span><a href="#">一个好用的C++日志生成类</a></span> 

</li> 

<li><a href="#"><img src="http://files.jb51.net/upload/2010-3/20100303232225439.jpg" alt="" width="100" 

height="75"/></a> 

<span><a href="#">JS+CSS联合打造图文结合动感菜单</a></span> 

</li> 

</ul> 

</body> 

</html>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值