css 显示图片列表

其中一个

/* --------------------------------------------- */
/* ----------- Gallery code start -------------- */
/* --------------------------------------------- */
.gallery{
margin:0; padding:0;
overflow:hidden; /* Clears the floats */
width:100%; /* IE and older Opera fix for clearing, they need a dimension */
list-style:none;
}
.gallery li{
float:left;
display:inline; /* For IE so it doesn't double the 1% left margin */
width:23.8%;
margin:0 0 10px 1%; padding:10px 0;
height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
position:relative; /* This is the key */
background:url(http://dnevnikeklektika.com/css/en-gallery/45degree.png);
}
.gallery a,
.gallery img{
display:block;
width:100%;
}

a img{ border:none; } /* A small fix */

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
padding:3px;
background:#eeefef;
width:75px; height:75px;
border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover{
border-color:#dfdfdf;
}

/* These are all optional, for decoration purpouses only */
.gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}

<ul class="gallery">
<li><a href="#" title="Klik za veću sliku"><img src="http://dnevnikeklektika.com/css/en-gallery/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>

转载于:https://www.cnblogs.com/linbaba/archive/2011/04/14/2016262.html