html/css 图片展示效果

转载

mb5ff40a36c352c 2017-09-06 21:33:00

文章标签 实例 html html5 css javascript 文章分类 代码人生

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div  class="demo" >
    <ul>
        <li>
            <a href="http://baidu.com">
                <img src="1.jpg"/>
                <span>学会html5 你就是赢家</span>
           </a>
        </li>
        <li>
            <a href="http://baidu.com">
                <img src="1.jpg"/>
                <span>学会html5 你就是赢家</span>
            </a>
        </li>
        <li>
            <a href="http://baidu.com">
                <img src="1.jpg"/>
                <span>学会html5 你就是赢家</span>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

demo.css

div,ul,li,dl,dt,dd {
    margin:0;
    padding:0;

}
ul,li,dl,dt,dd {
    list-style: none;
}
.demo{
    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);-moz-opacity:0.5;opacity: 0.5;
    background:#000;
    color:#fff;
    line-height:40px;
    text-align:center;
    display:none;
}
.demo ul li a:hover span{
    display:block;
}

　　效果：

html/css 图片展示效果_实例 html/css 图片展示效果_css_02