CSS实现简易相册方法

功能分析:

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

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

  关键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;
}

    参考《CSS那些事》  位于本地电脑webcontent/photo.html|css

posted @ 2013-04-21 21:26  viltran  阅读(502)  评论(2编辑  收藏  举报