国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
CSS完成神奇創(chuàng)意的相框
  • Magic Photo Frame 神奇創(chuàng)意的CSS圖片相框，這里只是介紹一種方法，至于相冊的形狀你完全可以自己制作，注意相框格式是PNG透明格式。
    •  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS完成神奇創(chuàng)意的相框</title>
    <style type="text/css">
    *{
     text-align:center;
     border:0;
     list-style:none;
    }
    body{
     font-size:12px;
     font-family:Tahoma, Geneva, sans-serif;
     background:#000;
    }
    .photo{
     width:404px;
     margin:0 auto;
     border-left:solid 2px #333;
     border-right:solid 2px #333;
     background:#fff;
    }
    .photo h1{
     font-size:14px;
     color:#666;
     line-height:40px;
    }
    .photo ul{
     margin:0;
     padding:0;
    }
    .photo li{
     position:relative;
     width:400px;
     height:300px;
     overflow:hidden;
    }
    .photo li a:link span,.photo li a:visited span{
     display:none;
    }
    .photo li a:hover span{
     display:block;
     text-align:center;
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     font-size:40px;
     line-height:300px;
     color:#f00;
     background:#000;
     filter:alpha(opacity=70);
     -moz-opacity: 0.;
     opacity: 0.7;
    }
    .magic1,.magic2,.magic3{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
    }
    .magic1{
     background: url(/jscss/demoimg/200908/01.png) no-repeat;
    }
    .magic2{
     background: url(/jscss/demoimg/200908/02.png) no-repeat;
    }
    .magic3{
     background: url(/jscss/demoimg/200908/03.png) no-repeat;
    }
    a:link,a:visited,a:hover{
     text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div class="photo">
        <h1>Magic Photo Frame 神奇創(chuàng)意相框</h1>
     <ul>
            <li>
                <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a>
            </li>
            <li>
                <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a>
            </li>
            <li>
                <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a>
            </li>
     </ul>
    </div>
    </body>
    </html>
    打開APP，閱讀全文并永久保存 查看更多類似文章
    猜你喜歡
    類似文章
    純CSS酷黑風(fēng)格三級下拉菜單代碼
    CSS3模仿的圓角Js彈出框效果，圖片盒子
    jQuery 圖片切換，帶標(biāo)題和說明文字
    動(dòng)態(tài)菜單(一)
    鼠標(biāo)移上圖片，變換出大圖片
    Jquery EasyUi實(shí)戰(zhàn)教程布局篇
    更多類似文章 >>
    生活服務(wù)
    分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
    綁定賬號成功
    后續(xù)可登錄賬號暢享VIP特權(quán)！
    如果VIP功能使用有故障，
    可點(diǎn)擊這里聯(lián)系客服！

    聯(lián)系客服