ul和li弄的图片列表
<!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弄的图片列表的更多相关文章
- div+css（ul li）实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- 使用ul和li进行图片的布局
使用ul和li进行浮动布局(自适应) 1 图片上下两排: 首先盒子的宽度要给100% ul包裹一个div,首先量好盒子的宽和高,并进行设置, margin 0 auto 盒子居中显示 每个li向左浮动 ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- CSS图片列表
1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...
- 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 ...
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
随机推荐
- ActiveMQ消息游标 --转载
转:http://blog.csdn.net/m13321169565/article/details/8081358 在Activemq以前的版本中,broker会把待发送的消息保存在内存中.这种方 ...
- poj 1426 Find The Multiple (bfs 搜索）
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18012 Accepted: 729 ...
- try....exception....finally
class MyException(Exception): def __init__(self,msg): self.msg=msg def __str__(self): return self.ms ...
- jQuery （样式篇）
1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的 ...
- C语言面向对象编程（五）：单链表实现（转）
这里实现的单链表,可以存储任意数据类型,支持增.删.改.查找.插入等基本操作.(本文提供的是完整代码,可能有些长.) 下面是头文件: #ifndef SLIST_H #define SLIST_H # ...
- 【Dos】Dos命令大全
dos命令大全 AT 计划在计算机上运行的命令和程序.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.CACLS 显示或修改文件的访问控制列表(ACLs).CALL ...
- Android基于UDP的局域网聊天通信
代码地址如下:http://www.demodashi.com/demo/12057.html 记得把这几点描述好咯:代码实现过程 + 项目文件结构截图 + 演示效果 1. 开发环境 1.1 开发工具 ...
- android adt 最新下载地址23.03
打开这个网址就可以看到adt的详细信息: http://developer.android.com/sdk/installing/installing-adt.html 或者直接在你的eclipse ...
- 转：EMQ（emqttd） 2.x 安装和使用（物联网传输控制协议的Broker）
支持下国产开源. MQTT物联网传输控制协议:<MQTT-3.1.1-CN.pdf> 下载:emqttd-centos64-v2.0-rc.2-20161019.zip 安装: $ unz ...
- mac apt-get--> Homebrew
在最近采集linux进程网络指标的时候,为了对比采集结果,需要linux系统查看进程网络流量命令,最后查到nethogs 这个工具好用,但是在下载安装过程中碰到问题: 1:http://blog.cs ...