[转]一个UL和LI写出来的简单的图片列表

最新推荐文章于 2020-07-07 11:07:27 发布

weixin_30719711

最新推荐文章于 2020-07-07 11:07:27 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/findw/archive/2012/07/26/2609565.html

本文介绍了一种使用HTML和CSS实现的产品展示列表布局方法。通过设置列表项为内联浮动，并规定图片和标题的具体样式，实现了图片及其标题的有序排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自http://goodboy5264.blog.163.com/blog/static/2538298201051935725392/?fromdm&fromSearch&isFromSearchEngine=yes

html代码:

css代码：

效果图：

全部代码：

css代码：

1 /* 产品展示列表Start */
2 .cplist{
3 list-style: none; /* 列表样式清除 */
4 margin: 0 auto;
5 padding: 5px 0px ;
6 line-height: 1.8em!important; /* 列表行火狐 */
7 line-height: 2em; /* 列表行ie */
8 margin-bottom: 20px;
9 }
10 .cplist img{ /* 设置图片边框 */
11 padding: 2px 2px;
12 border: 1px silver solid;
13 }
14 .cplist li{
15 width: 151px; /* 图片宽度 */
16 display: inline; /* 所有图片一行显示，超出宽度后换行 */
17 float: left; /* 元素左浮动 */
18 margin-left: 17px!important;
19 margin-left: 12px;
20 margin-top: 10px;
21 }
22 .cplist li span{
23 float: left;
24 width: 151px; /* 设置文字行的最大宽度 */
25 overflow: hidden; /* 超出内容隐藏 */
26 text-align: center; /* 文字居中 */
27 height: 20px;
28 }

html代码

1 <ul class="cplist">

2 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
3 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
4 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
5 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
6 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
7 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
8 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
9 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
10 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
11 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
12 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
13 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
14 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
15 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
16 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
17 < li >< img src ="images/chanpin.jpg" alt ="" />图片标题 </ li >
18 </ ul >

最后说明一点，请将ul外部使用div并设置宽度，这样整个的图片列表就做好了，大家只需要根据自己的图片大小和div的大小调整css代码中的数值就可以了。

转载于:https://www.cnblogs.com/findw/archive/2012/07/26/2609565.html