<!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. 【原】使用StarUML画用例图

    在写一份升级方案的时候,发现文字描述半天,好多句子,依然不容易被人看明白,使用visio画了个流程图,后来觉得画个时序图是最清晰得了. 于是在找了一个工具: startUML,当然,做时序图,建模之类 ...

  2. TP框架中模糊查询实现

    TP框架中模糊查询实现 $where['g.name'] = array('like','%'.$groupname.'%'); 表达式查询 上面的查询条件仅仅是一个简单的相等判断,可以使用查询表达式 ...

  3. RSA的密钥把JAVA格式转换成C#的格式(2)

    把C#格式转换成Java:RSA的密钥把JAVA格式转换成C#的格式(1) 我已经在第一篇介绍过如何把C#格式转换成Java,现在来看看如何把Java格式转换成C#. /// <summary& ...

  4. android adt 最新下载地址23.03

    打开这个网址就可以看到adt的详细信息:  http://developer.android.com/sdk/installing/installing-adt.html 或者直接在你的eclipse ...

  5. 用尽洪荒之力整理的Mysql数据库32条军规（转）

    今天上午吐血整理了Oracle SQL性能优化的40条军规,其中很多规则也是适用于Mysql的,结果今晚发现这一篇文章——用尽洪荒之力整理的Mysql数据库32条军规,和我的竟有异曲同工之妙,当然不同 ...

  6. 构建基于Javascript的移动web CMS入门——简单介绍

    看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...

  7. angular4 radio checkbox 有用

    <span *ngFor="let op of [{'id':'a','text':'11'},{'id':'b','text':'2222'},{'id':'cc','text':' ...

  8. 使用 ObjectDataSource 缓存数据

    简介 就计算机科学而言 , 缓存 过程包括成本昂贵的数据或信息的获取 , 以及将备份存储在可快速访问的位置.对于数据驱动的应用程序,大型.复杂的查询通常会消耗大量应用程序执行时间.要提升这类应用程序的 ...

  9. 在ubuntu下安装ns2-allinone-2.35.tar.gz

    1.软件下载 首先先下载ns-allinone-2.35.tar.gz (下载路径http://sourceforge.net/projects/nsnam/files/),将其放到你/home/my ...

  10. SQL ： IN 和 Exists 的区别

    Sql语句中IN和exists的区别及应用 表展示 首先,查询中涉及到的两个表,一个user和一个order表,具体表的内容如下: user表: order表: in 确定给定的值是否与子查询或列表中 ...