<!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. B7:访问者模式 Visitor

    表示一个作用于某对象结构中各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 适用场景:1.适用于元素类数据结构相对稳定(类的方法固定,但属性可以变化,如果方法变化很大,就无 ...

  2. Java类集-set

    Set接口是Collection接口的子接口,Set接口中不能插入反复元素 Set接口的经常使用子类: HashSet是set接口的一个子类.特点:里面不能存放反复元素,并且採用散列的存储方式.所以没 ...

  3. 原生 javascript 基础回顾

    (1)打开新窗口 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径.如果省略这个参数,或者它的值是空 字符串 ...

  4. redis源代码分析（5）——aof

    前面几篇基本介绍了redis的主要功能.流程.接下来是一些相对独立的部分,首先看一下持久化. redis持久化支持两种方式:RDB和AOF,我们首先看一下AOF的实现. AOF(Append only ...

  5. 【Java】Java_07 浮点型

    浮点型 类型 占用存储空间 表数范围 Float 4字节 -3.403E38~3.403E38 Double 8字节 -1.798E308~1.798E308 float类型又被称作单精度类型,尾数可 ...

  6. leetcode 解题报告 Word Ladder II

    题目不多说了.见https://oj.leetcode.com/problems/word-ladder-ii/ 这一题我反复修改了两天半.尝试过各种思路,总是报TLE.终于知道这一题为什么是leet ...

  7. 获取取并下载tuku的漫画的爬虫

    代码地址如下:http://www.demodashi.com/demo/12842.html 概述 一个简单的爬虫,实现是爬取tuku网站的漫画.并下载到脚本的文件夹中,下载的漫画按照章节名放在各自 ...

  8. Function.prototype.bind、call与apply方法简介

    前言 前段时间面试遇见一题,题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() ...

  9. Idea maven多模块项目有些加载不出来

    进入View>Tool Windows>Maven projects区域,添加新的项目识别. 选择要加载项目的pom.xml文件,ok 完成.

  10. cygwin开发环境搭建与apt-cyg的应用

    1.Cygwin安装 http://www.cygwin.com/下载安装工具 详细安装过程參照http://jingyan.baidu.com/article/6b97984d83dfe51ca2b ...