CSS List Grid Layout 图片垂直居中

CSS List Grid View Layout

body{
font-family:Arial;
text-align:center;
}

p{

}

.img-grid{
width:603px;
margin:auto;
overflow:hidden;
position:relative;
border:solid 20px #CCCCCC;
}

.img-grid h3{
padding:0 0 12px 0;
background:#ccc;
margin:0;
font:normal normal bold 3em/normal "Georgia";
letter-spacing:-0.1em;
text-align:center;
}

.img-grid ul{
list-style-type:none;
margin:-1px 0 0 -1px;
padding:0;
width:100%;
border-width:0px 1px 0 0;
position:relative;
}

.img-grid li{
zoom:1;
list-style-type:none;
margin:0;
padding:0;
vertical-align:middle;
width:200px;
padding:0 0 30px 0;

text-align:center;
position:relative;
border:solid 1px #dedede;
border-top-color:#CCCCCC;
margin:-1px -1px 0 0;
border-width:1px 0 0px 1px;
float:left;
display:inline;
font:150px/normal "Times new roman";
*padding:0;
*font-size:180px;
}

.img-grid li img {
vertical-align:middle;
background:#fff;
font-size:12px;
padding:2px;
border:solid 1px #555;

}

.img-grid li a:hover{
text-indent:0;/*IE6 need this to trigger :hover*/
}

.img-grid li a:hover img{
padding:1px;
border:solid 2px #336699;
}

.img-grid li strong{
display:block;
font:small/1.1 Arial;
background:#fff;
position:absolute;
bottom:0;
left:0;
width:100%;

}
.img-grid li strong a{
display:block;
padding:8px 4px;
color:#336699;
text-decoration:none;
zoom:1;
}

.img-grid li strong a:hover{
text-decoration:underline;
}

CSS List Grid Layout

Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21

List Grid View


  • sodales porta libero.n

  • sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin

  • sodales porta libero. Integerdum adipiscing. Proin

  • sodales porta libero. Integer adipiscing. Proin

  • sodalesber Proin

  • sodales in

  • sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin

  • sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin

  • sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin

  • sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin

  • sodales porta liber Proin

  • sodales porta liberor bibendum adipiscing. Proin

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • css列表前的小方块

    自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design by 我们 body{font:14px tahoma;} a:link,a:visited{text-decoration:none;font-family:"宋体";color:#999999;} a:hover{color:red;text-decoration:underline;} ul{list-s

  • 利用js+css+html实现固定table的列头不动

    话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct

  • css+table 1px边框单元格

    css table 之1px边框单元格--我们 .myTable,.myTable td { border:1px solid #cccccc; border-collapse:collapse; } 我们 我们 我们 我们 我们 我们 我们 我们 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 从Table向Css过渡的优缺点比较

    CSS布局提倡者的声音正被"表格布局的优点"的声音所覆盖.一个荒诞的说法是CSS是难学的.事实上,CSS一点也不比其他网页技术难.问题在于:对于表格设计已经相当有经验的web设计师不得不完全放弃他们的思维模式改用CSS方法. 我曾经用表格布局设计过许多年,当我第一次开始使用CSS布局时,我也遇到了问题."用表格多简单呀"我想.但是,那只是因为我已经用惯了表格,我知道如何巧妙的处理它们.任何改变,哪怕是小小的一点,都会让我觉得麻烦,更不用说这么激烈的变化. 回忆起我第

  • css列表标签list与表格标签table详解

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式,circle空心圆,square实心方块 有序列表常用decimal-leading-zero以0开头的数字,lower-roman.upper-roman小写.大写罗马数字,lower-alpha.upper-alpha小写.大写英文字母 ul.a {list-style-type: circl

  • css之使table也能overflow:hidden

    css table 超出隐藏 table { width:*; table-layout : fixed ; } td { white-space:nowrap; overflow:hidden; } 固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • css ol有序列表

    今天看了振之关于有序列表的一篇文章,觉得挺不错的.写个例子: 类型值  生成样式  序列举例  A  大写字母  A.B.C.D.E  a  小写字母  a.b.c.c.e  I  大写罗马数字  I.II.III.IV.V  i  小写罗马数字  i.ii.iii.iv.v  1  阿拉伯数字  1.2.3.4.5 有序列表_www.jb51.net 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • CSS List Grid Layout 图片垂直居中

    CSS List Grid Layout 图片垂直居中

    CSS List Grid View Layout body{ font-family:Arial; text-align:center; } p{ } .img-grid{ width:603px; margin:auto; overflow:hidden; position:relative; border:solid 20px #CCCCCC; } .img-grid h3{ padding:0 0 12px 0; background:#ccc; margin:0; font:norma

  • css支持标准的图片垂直居中

    css支持标准的图片垂直居中

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • 使用PHP下载CSS文件中的图片的代码

    共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //note 匹配出需要下载的URL地址 preg_match_all("/url\((.*)\)/", $styleFileContent, $imagesURLArray);

  • css+js完美控制图片大小

    css+js完美控制图片大小

    使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示. css+js完美控制图片大小 0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=i

  • JS实现图片垂直居中显示小结

    第1种,居中效果 <div class="box"> <div class="center">居中效果</div> </div> /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray

  • jquery+css实现动感的图片切换效果

    jquery+css实现动感的图片切换效果

    本文实例讲述了jquery+css实现动感的图片切换效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右移并消失,记数器加1(用于调用下一张图片),当图片删除500毫秒后判断图片是不是最后一张,如果是,就把记数器调为0,从第一张图片开始,删除图片代码,接着创建一张新的图片代码,并把src设为下一张图片,同时加上缩放动画样式类animated zoom

  • webpack css加载和图片加载的方法示例

    webpack css加载和图片加载的方法示例

    css加载器 在webpack中,所有的资源(js文件.css文件.模板文件,图片文件等等)都被看成是一个模块,因此多有的资源都是可以被加载的. 加载这些资源我们要在module属性定义这些加载配置(指定加载器). 在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置. 通过test定义匹配的规则(正则表达式) 通过loader定义加载器,可以通过!级联多个加载器 加载css是要两个加载器,一个是style-loader,一个是css-loader样

  • 解决vue打包css文件中背景图片的路径问题

    vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题. 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is speci

随机推荐