信鸽网

CSS 图片横向排列实现代码

  作者：bea

<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:


<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./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./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./upload/2010-3/20100303232225439.jpg" alt="" width="100"
height="75"/></a>
<span><a href="#">JS+CSS联合打造图文结合动感菜单</a></span>
</li>
</ul>
</body>
</html>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: