html中怎样做成相册的效果,CSS相册简单实现方法(功能分析及代码)

很久以前就知道ctrly.cn 了感觉很简单也没太在意，

效果可以看这里：

http://www.ctrly.cn/

下面是提取出来的代码 ：

HTML—CSS 简易相册

/* CSS Reset */

* {

margin: 0;

padding: 0;

border: 0;

outline: 0;

}

body {

font-family: Arial, "MS Trebuchet", sans-serif;

color:#888;

}

a{

text-decoration:none;

color:#8ac;

}

/* Setup Tabs */

ul{

background:#000;

width:125px; /* Width of Tab Image */

float: left;

list-style: none;

border-right:8px solid black;

}

ul li{

height:75px; /* Height of Tab Image */

}

/* Setup Tab so normal opacity is 40 and rollover is 100 */

ul li a img{

/* for IE */

-ms-filter:"PRogid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

filter:alpha(opacity=40);

/* CSS3 standard */

opacity:0.4;

}

ul li a:hover img{

/* for IE */

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter:alpha(opacity=100);

/* CSS3 standard */

opacity:1.0;

}

#images{

width:500px;

height:300px;

overflow:hidden;

float:left;

}

#wrapper{

width:633px;

height:300px;

border:8px solid black;

margin:0px auto;

}

#credits{

width:633px;

margin: 0 auto;

text-align: right;

}

p{

margin-top:10px;

font-size:9pt;

}

h1#header{

width:633px;

margin:15px auto 5px;

font-size:14pt;color:#f00;

}

.foot{

width:633px;background:#111;font-size:12px;

margin:2px auto;border-top:1px solid #000;

}

单击左边的小图看效果

• 
• 
• 
• 

功能分析：

相册在默认情况下以缩略图的形式显示，并且不压缩相片的原有宽度和高度属性，而是取相册的某个部分作为缩略图形式。

当鼠标悬停于某张缩略图上时，相册列表中的缩略图恢复为原始相片的宽度和高度，展现在相册的某个固定的区域，同时缩略图为空。

关键css代码：

li a{

display:block;

width:70px;

height:70px;

overflow:hidden; /*important*/

float:left;

margin:0.5px;

border:2px solid #efdeb0;

}

li a:hover img{

position:absolute; /*定位 */

width:550px;

height:550px;

top:10px;

left:10px;

margin:0;

border:4px soild #a98175;

}