在列表中图文嵌套

这次写个列表中图文嵌套的小例子例子中模仿百度新闻首页中的效果

先把HTML代码写出来，很简单

<div>
    <ul>
        <li><a href="#"><img src="images/tw1.jpg"><span>许晴晒出游美照 河边蹦跳</span></a></li>
        <li><a href=""><img src="images/tw2.jpg"><span>小芈月刘楚恬周出游爆潮</span></a></li>
        <li><a href="#"><img src="images/tw3.jpg"><span>45岁梁佩瑚嫁圈外富商</span></a></li>
        <li><a href="#"><img src="images/tw4.jpg"><span>高圆圆着宽松衣回京显亲民</span></a></li>
        <li><a href="#"><img src="images/tw5.jpg"><span>姚晨宣布11月将生二胎</span></a></li>
    </ul>
</div>

默认样式如下：

下面就开始仿照百度的样式进行美化

<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    ul{
        list-style:none;
    }
    ul:after{
        clear: both;
        display: block;
        visibility: hidden;
        content: "";
        font-size: 0;
        line-height: 0;
    }
    li{
        margin-right:10px;
        float:left;
        position: relative;
    }
    li a{
        display: block;
        text-decoration:none;
    }
    li span{
        font:12px arial, "微软雅黑","宋体";
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position:absolute;
        left:0;
        top:125px;
        background-color:rgb(246,247,248);
        color: rgb(34,34,34);
    }
    li span:hover{
        background-color: rgb(48,100,187);
        color:#FFF;
    }
</style>

刷新一下页面

其实，我自己感觉把样式做成上次新闻例子中的样式更美观一些下面就修改CSS对比一下

<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    ul{
        list-style:none;
    }
    ul:after{
        clear: both;
        display: block;
        visibility: hidden;
        content: "";
        font-size: 0;
        line-height: 0;
    }
    li{
        height: 125px;
        margin-right:10px;
        float:left;
        position: relative;
    }
    li a{
        height: 125px;
        display: block;
        text-decoration:none;
    }
    li span{
        font:12px "宋体";
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: block;
        text-align: center;
        position:absolute;
        left:0;
        bottom: 0;
        color: #FFF;
        background-color: #000;
        filter:alpha(opacity=40);
        opacity:0.4;
    }
    li span:hover{
        background-color: rgb(48,100,187);
        color:#FFF;
    }
</style>

效果如下：

OK 我还是觉得这样好看些