zoukankan      html  css  js  c++  java
  • 鼠标放上去- -显示透明层

    <!DOCTYPE html>
    <html>
    <head>
    <meta  charset="UTF-8" />
    <title>鼠标放上去- -显示透明层</title>
    <style type="text/css">
    div,ul,li,dl,dt,dd{
        margin:0;
        padding:0;
    }
    ul,li,dl,dt,dd{
        list-style:none;
    }
    .demo{
        margin:0 auto;
        width:930px;
    }
    .demo ul li{
        float:left;
        width:300px;
        margin-right:6px;
        position:relative;
    }
    .demo ul li img{
        border:none;
        position:relative;
        z-index:22;
    }
    .demo ul li a{
        width:300px;
        display:block;
        border:2px solid #ccc;
    }
    .demo ul li a:hover{
        border:2px solid #C03;
    }
    .demo ul li a span{
        position:absolute;
        z-index:33;
        bottom:2px;
        left:2px;
        width:300px;
        height:40px;
        filter:alpha(Opacity=50);
        opacity: 0.5;
        -moz-opacity:0.5;
        -khtml-opacity:0.5;
        -webkit-opacity:0.5;
    
        background:#000;
        color:#fff;
        line-height:40px;
        text-align:left;
        display:none;
    }
    .demo ul li a:hover span{
        display:block;
    }
     img{
         width: 100%;
     }
    </style>
    </head>
    <body>
     <div class="demo">
        <ul>
           <li>
             <a href="javascript:void(0)">
               <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg"  />
               <span>学会html5 绝对的屌丝逆袭</span>
             </a>
           </li>
           <li>
             <a href="javascript:void(0)">
               <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg"  />
               <span>圆角水晶按钮制作</span>
             </a>
           </li>
           <li>
             <a href="javascript:void(0)">
               <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg"  />
               <span>8小时助你攻下html与css样式代码</span>
             </a>
           </li>
        </ul>
     </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    第十九周作业
    第十八周作业
    第十七周作业
    第16周作业
    第15周作业
    第14周作业作业
    第13周作业
    第12周作业
    第二阶段月考
    RDB和AOF的区别
  • 原文地址:https://www.cnblogs.com/heyiming/p/6599737.html
Copyright © 2011-2022 走看看