<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

 <head>

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

 <title>选择器的应用</title>

 <style type="text/css"> 

 /*产品展示列表Start*/

 .cplist{

  list-style: none;/*列表样式清除*/

  margin:0 auto;

  padding:5px 0px ;

  line-height:1.8em!important;/*列表行火狐*/

  line-height:2em;/*列表行ie*/

  margin-bottom:20px;

 }

 .cplist img{/*设置图片边框*/

  padding:2px 2px;

  border:1px silver solid;

  width:100px;

  height:100px;

 }

 .cplist li{

  width:100px;/*图片宽度*/

  display:inline;/*所有图片一行显示，超出宽度后换行*/

  float:left;/*元素左浮动*/

  margin-left:17px!important;

  margin-left:12px;

  margin-top:10px;

 }

 .cplist li span{

  float:left;

  width:100px;/*设置文字行的最大宽度*/

  overflow:hidden;/*超出内容隐藏*/

  text-align:center;/*文字居中*/

  height:25px;

 }

 </style>

 </head>

 <body>

     <ul class="cplist">

  <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

     <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>

    </ul>

 </body>

 </html>

效果

ul和li弄的图片列表的更多相关文章

  1. div+css（ul li）实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  2. 使用ul和li进行图片的布局

    使用ul和li进行浮动布局(自适应) 1 图片上下两排: 首先盒子的宽度要给100% ul包裹一个div,首先量好盒子的宽和高,并进行设置, margin 0 auto 盒子居中显示 每个li向左浮动 ...

  3. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  4. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  7. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  9. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

随机推荐

  1. activiti designer下载地址

    http://www.activiti.org/designer/update/ http://www.activiti.org/designer/archived/       这个地址貌似不能用了 ...

  2. 冲销会计凭证：FBRP与FB08的区别

    FBRA一般是用来对已经清帐的凭证进行冲销的,我们知道普通的冲销只要用FB08就可以了,但是对于已经被清帐和凭证,我们只能用FBRA来进行清帐,我们来按以下的没测试来做验证一下.STEP1:用F-22 ...

  3. php中在局部作用域内访问全局变量

    php中,由于作用域的限制,导致变量的访问限制: 1.局部作用域内不能访问全局变量 2.全局作用域内不能访问局部变量 对于第一种情况,如下代码将不能正常运行: <?php //局部作用域(函数内 ...

  4. src和href使用总结

    src img 图片 <img src="/img/1.png" alt="1" /> rame iframe 框架集 <iframe src ...

  5. 使用swap 清空vector

    //最简单的使用swap,清除元素并回收内存 vector <int>().swap(vecInt); //清除容器并最小化它的容量, // vecInt.swap(vector<i ...

  6. Java里的并发容器与安全共享策略总结

    一.并发容器 ArrayList --> CopyOnWriteArrayList 概念 : 简单的讲就是写操作时赋值,当有新元素添加到CopyOnWriteArrayList时,它先从原有的数 ...

  7. SVN checkout 功能不可用 右键只看到提交和更新，没有显示checkout

    不要在受SVN控制的文件夹里点右键,因为这个文件夹已经在SVN控制之下,当然不会允许在里面嵌套另一个SVN版本库换个不受控的文件夹点右键,比如D盘根目录

  8. memcached 命令行举例

    1.启动Memcache  常用参数
memcached 1.4.3 
 -p <num> 设置端口号(默认不设置为: 11211) 
 -U <num> UDP监听端口 (默 ...

  9. atitit.groovy 语法特性

    atitit.groovy 语法特性 1. Groovy 1.6概览1 1.1. 多路赋值2 2. 新发布的Groovy2.0为这门语言带来了关键的静态特性:静态类型检查和静态编译:2 3. 参考3 ...

  10. Xilinx 7系列例化MIG IP core DDR3读写

    昨晚找了一下,发现DDR3读写在工程上多是通过例化MIG,调用生成IPcore的HDL Functional Model.我说嘛,自己哪能写出那么繁琐的,不过DDR读写数据可以用到状态机,后期再添砖加 ...