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