1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>选择器的应用</title>
  6.  <style type="text/css"> 
  7.  
  8.  /*产品展示列表Start*/
  9.  .cplist{
  10.   list-style: none;/*列表样式清除*/
  11.   margin:0 auto;
  12.   padding:5px 0px ;
  13.   line-height:1.8em!important;/*列表行火狐*/
  14.   line-height:2em;/*列表行ie*/
  15.   margin-bottom:20px;
  16.  }
  17.  .cplist img{/*设置图片边框*/
  18.   padding:2px 2px;
  19.   border:1px silver solid;
  20.   width:100px;
  21.   height:100px;
  22.  }
  23.  .cplist li{
  24.   width:100px;/*图片宽度*/
  25.   display:inline;/*所有图片一行显示，超出宽度后换行*/
  26.   float:left;/*元素左浮动*/
  27.   margin-left:17px!important;
  28.   margin-left:12px;
  29.   margin-top:10px;
  30.  }
  31.  .cplist li span{
  32.   float:left;
  33.   width:100px;/*设置文字行的最大宽度*/
  34.   overflow:hidden;/*超出内容隐藏*/
  35.   text-align:center;/*文字居中*/
  36.   height:25px;
  37.  }
  38.  </style>
  39.  </head>
  40.  <body>
  41.  
  42.      <ul class="cplist">
  43.   <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  44.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  45.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  46.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  47.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  48.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  49.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  50.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  51.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  52.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  53.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  54.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  55.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  56.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  57.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  58.      <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
  59.     </ul>
  60.  </body>
  61.  </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. c# 用OpenXmL读取.xlsx格式的Excel文件 返回DataTable

    1.须要引用的dll :  DocumentFormat.OpenXml.dll  ---须要安装一下OpenXml再引用 WindowsBase  ---直接在项目里加入引用 2.方法: /// & ...

  2. POJO百度百科

    POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和EJB混淆起来, ...

  3. Linux的fuser命令解析

    fuser命令是用来显示所有正在使用着指定的file, file system 或者 sockets的进程信息. 例一: #fuser –m –u /mnt/usb1 /mnt/usb1: 1347c ...

  4. CentOS 7上安装Zabbix（高速安装监控工具Zabbix）

    前提要求(optional) 安装Zabbix监控工具前,先安装必要的执行工具包 yum install gcc gcc-c++ make openssl-devel curl wget net-sn ...

  5. struts2中Action訪问servlet的两种方式

    一.IoC方式                在struts2框架中,能够通过IoC方式将servlet对象注入到Action中.通常须要Action实现下面接口: a. ServletRequest ...

  6. Spring使用经验之Listener综述

    Note:Spring使用版本是4.1.6.RELEASE 1. ContextLoaderListener最基本的SpringListener,加载Spring配置文件 配置名为contextCon ...

  7. 9、Linux驱动的杂项设备

    杂项设备,是字符设备中的特殊,它的主设备号,是 10,不同的杂项设备,通过次设备号进行区分. 1.注册与注销 int misc_register(struct miscdevice * misc) 完 ...

  8. Telerik UI for ASP.NET Core概要

    介绍:不介绍了,刚开始研究. 下载:CSDN或者51cto上都有最新的开发版 安装:默认的安装目录是C:\Program Files (x86)\Progress\Telerik UI for ASP ...

  9. AMQP 协议介绍

    RabbitMQ 是遵从AMQP 协议的, 换句话说, RabbitMQ 就是AMQP 协议的Erlang 的实现(当然RabbitMQ 还支持STOMP2 .MQTT3 等协议) 0 AMQP 的模 ...

  10. Mybatis(三)：MyBatis缓存详解

    MyBatis缓存分为一级缓存和二级缓存 一级缓存 MyBatis的一级缓存指的是在一个Session域内,session为关闭的时候执行的查询会根据SQL为key被缓存(跟mysql缓存一样,修改任 ...