zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    centos安装composer
    fmt.Printf()
    php进程,线程,异步
    php异步处理
    php安装swoole扩展
    冒泡排序
    快速排序
    php的foreach指针
    无密钥登陆
    ubuntu18.04切换阿里云源
  • 原文地址:https://www.cnblogs.com/viltran/p/3034522.html
Copyright © 2011-2022 走看看