NEC学习 ---- 模块 - 上图下文图文列表

上图下文图文列表的效果如下图:

可以看到三个红色框中的三中"上图下文的图文列表";

这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍:

NEC学习 ---- 模块 - 左图右文图文列表

还是把代码贴一下,

html代码:

<div class="container">
    <div class="m-list4 m-list4-x"><!-- 上 -->

        <ul class="f-cb">
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/1/Text1/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
                <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
            </li>
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/2/Text2/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
                <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
            </li>
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/3/Text3/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
                <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
            </li>
        </ul>
    </div>

    <div class="m-list4 m-list4-x"><!-- 中 -->
        <ul class="f-cb">
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/4/Text4/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/5/Text5/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
            <li>
                <div class="u-img"><a href="#"><img src="http://lorempixel.com/150/120/city/6/Text6/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
        </ul>
    </div>

    <div class="m-list4 m-list4-x"><!-- 下 -->
        <ul class="f-cb">
            <li>
                <div class="u-img2"><a href="#"><img src="http://lorempixel.com/150/120/city/7/Text7/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
            <li>
                <div class="u-img2"><a href="#"><img src="http://lorempixel.com/150/120/city/8/Text8/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
            <li>
                <div class="u-img2"><a href="#"><img src="http://lorempixel.com/150/120/city/9/Text9/" alt="" width="150" height="120" /></a></div>
                <h3>有标题</h3>
            </li>
        </ul>
    </div>
</div>

CSS代码:

<style type="text/css">
    .container {
        width:90%;
        margin:45px auto;
    }
    .m-list4 {
        padding:1px 0 0 0;zoom:1;
    }
    .m-list4 ul{
        margin:-11px 0 0 -10px;
    }
    .m-list4 li{
        margin:10px 0 0 10px;
        display:inline;width:150px;
        float:left;
    }
    .m-list4 h3,.m-list4 p {
        height:18px;
        line-height:18px;
        overflow:hidden;
        width:100%;
    }
    .m-list4 h3{
        margin:5px 0 5px 0;
    }
    
    /*无边框*/
    .u-img {
        display:block;
        width:150px;
        height:120px;
        position:relative;
    }
    .u-img img{
        display:block;
        width:100%;
        height:100%;
    }
    /*有边框*/
    .u-img2 {
        display:block;
        width:144px;
        height:114px;
        padding:2px;
        border:1px solid #dcdcdc;
　　　　 position:relative;
    }
    .u-img2 img {
        display:block;
        width:100%;
        height:100%;
    }
</style>

其实很简单, 在这里我要介绍的是有边框的图片 和 无边框的图片的写法:

对于"图文列表"中的"图", 就是我们这里的 .u-img 和 u-img2 两种容器, 在用css控制的时候, 一般只需要控制容器 和 对应容器下的 img标签即可.

因为比较常用, 而且往往我们在变的时候, 只是宽和高发生了变化,所以我们常常写成类 .u-img 代表无边框 .u-img2 代表有边框

对于第一种 "无边框" 的情况:

　　　　 只需要指定宽和高, 并且使容器成为块元素(根据环境要求).

对于第二种 "有边框" 的情况:

　　　　 padding*2+border*2+width = 实际宽

　　　　 padding*2+border*2+height = 实际高

同时需要做的一件事, 就是position:relative; 的设置, 始终让图片显示在文本上层, 这样保证图片能够被点击.