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. ipt_connlimit限制并发,ipt_recent限制单位时间内的请求数目

    xt_connlimit(别名ipt_connlimit) 一.Centos5.8系统 需要手动的执行modprobe ipt_connlimit命令把模板加入内核中去.先查看 #lsmod |gre ...

  2. Android自己定义(三)实现圆盘的百分比设置

    近期一直在学习自己定义控件,昨天看到群里有人问怎样怎样实现圆盘样式的显示,学有所用,于是乎就有了这篇博客 先上图,一目了然 这里的显示颜色以及颜色块的大小你都能够自己设置 这里设置了三种颜色,相应三种 ...

  3. Invalid code signing entitlements. Your application bundle's signature contains

    http://code4app.com/requirement/54128041933bf0e0308b5204 Invalid code signing entitlements. Your app ...

  4. javaEE开发之文件下载

    package com.example.web; import java.io.File; import java.io.FileInputStream; import java.io.IOExcep ...

  5. eval（data）和eval("("+data+")")的区别

    如果data是字符串,使用eval("("+data+")")可以将其转换为json对象,和JSON.parse的功能一样.如果data是json对象,使用ev ...

  6. 对非正确使用浮点型数据而导致项目BUG的问题探讨

    乘法分配律 在上小学的时候就已经学习过乘法分配律,乘法分配律的详细内容是:两个数的和与一个数相乘.能够先把他们分别与这个数相乘,再相加.得数不变.乘法分配律的定义还能够用表达式"(a+b)× ...

  7. 【Java】Java_09 类型转换

    1.自动类型转换 自动类型转换:容量小的数据类型可以自动转换为容量大的数据类型.在图中,黑色的实线表示无数据丢失的自动类型转换,而红色的虚线表示在转换时可能会精度的损失. 特例: 可以将整型常量直接赋 ...

  8. C++常考面试题汇总(持续更新中)

    c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...

  9. Android创建JSON格式数据

    Android创建JSON格式数据 作为上一篇博客的补充,简单那解说了一下Android创建JSON格式数据的小Demo. 1. 创建JSON格式数据 对于Android创建JSON格式数据.因为An ...

  10. AngularJs学习笔记（2）——ng-include

    编写html文档的时候,为了实现代码模块化,增加复杂页面的代码可读性和可维护性,我们常常会想到将代码分散写入不同的HTML文件 angularJS里面的ng-include指令结合ng-control ...