<!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. 关于public、private、protected、internal

    1.private修饰符 private修饰符用于设置类或类成员的訪问权限仅为所属类的内部, private也被称为私有修饰符.某些时候须要訪问私有类成员时,可通过get和set訪问器读取或改动. 2 ...

  2. bootstrap popover 如何在hover状态移动到弹出上不消失

    bootstrap中的popover其实就是对tooltip做了一定升级,拥有了标题和内容 概要 使用的时候依赖第三方插件 依赖tooltip插件 必须初始化 title 和 content 可以在p ...

  3. 在FASTBuild中使用Distribution

    上一篇:在FASTBuild中使用Caching 在FASTBuild中使用分布式(distribution)编译需要注意以下四个环节. 一.编译器设置 某些编译过程与分布式相矛盾,如果一个对象不能被 ...

  4. Java 1.7 ReentrantReadWriteLock源代码解析

    因为本人水平与表达能力有限,有错误的地方欢迎交流与指正. 1 简单介绍 可重入读写锁时基于AQS实现的,典型的用法如JDK1.7中的演示样例: class RWDictionary { private ...

  5. JSP--百度百科

    JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1]  是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动 ...

  6. STL源码剖析(空间配置器)

    前言 在STL中,容器的定义中都带一个模板参数,如vector template <class T, class Alloc = alloc> class vector {...} 其中第 ...

  7. GoogLeNet模型的微调

    我从零开始训练了GoogLeNet模型. 但它没有给我带来希望的结果. 作为替代,我想对我的数据集中的GoogLeNet模型进行微调. 有谁知道我应该遵循什么步骤? 采纳答案: 假设你正在尝试做图像分 ...

  8. modelsim显示状态机名称的方法

    modelsim显示状态机名称的方法 2015-09-08 15:35 1414人阅读 评论(0) 收藏 举报  分类: FPGA基础知识(40)  版权声明:转载请注明出处:http://blog. ...

  9. Mysql数据库分库备份，分表备份

    分库备份 #!/bin/sh DBPATH=/server/backup MYUSER=root MYPASS=oldboy123 SOCKET=/data/3306/mysql.sock MYCMD ...

  10. dubbo_分布式框架dubbox介绍

    1.Dubbo概述Dubbo是阿里巴巴开源出来的一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及作为SOA服务治理的方案.简单的说,dubbo就是个服务框架,如果没有分布式的 ...