代码：PC HTML——图片列表

图片列表:　　2016-6-12

可作为图片列表的规范性写法。这个例子只处理了单行的模式。（ 一行多列 ）

<link href="css/common.css" rel="stylesheet" />

<style type="text/css">

.layout-main{width:1190px;margin-left:auto;margin-right:auto;font-family:'微软雅黑';}

.layout-l880{float:left;width:860px;}

.layout-r310{float:right;width:310px;}

.ls-section{position:relative;border:1px solid #ececec;font-family:'微软雅黑';}

.ls-sec-head h2{padding-left:80px;font-size:30px;font-style:normal;font-weight:normal;}

.ls-sec-body{margin:0 39px;width:780px;}

/* 可作为图片列表的规范性写法 .ls-sec-body 的宽度是780px */

.ls-sec-body .img-ul240x160{margin-right:-30px;overflow:hidden;}

.ls-sec-body .img-ul240x160 .img-li{float:left;margin-right:30px;width:240px;}

.ls-sec-body .img-ul240x160 .img1{width:100%;height:160px;}

.ls-sec-body .img-ul240x160 .p1{color:#666;font-size:14px;line-height:24px;margin-top:10px;}

.ls-sec-body .img-ul180x120{margin-right:-20px;overflow:hidden;}

.ls-sec-body .img-ul180x120 .img-li{float:left;margin-right:20px;width:180px;}

.ls-sec-body .img-ul180x120 .img1{width:100%;height:120px;}

.ls-sec-body .img-ul160x165{margin-right:-46px;overflow:hidden;}

.ls-sec-body .img-ul160x165 .img-li{float:left;margin-right:46px;width:158px;height:163px;border:1px solid #ececec;}/*160x165*/

.ls-sec-body .img-ul160x165 .imgbox{display:block;padding:14px 9px;}

.ls-sec-body .img-ul160x165 .img1{width:100%;height:78px;}

.ls-sec-body .img-ul160x165 .pbox{padding:9px 10px;background:#f2f2f2;}

.ls-sec-body .img-ul160x165 .pbox .a1{display:block;color:#999;font-size:12px;line-height:20px;height:40px;overflow:hidden;}/*限2行*/

</style>

<div class="layout-main">

    <div class="layout-l880">

        <!-- 左侧 start -->

        <div class="ls-section">

            <div class="ls-sec-head">

                <h2>基本情况</h2>

            </div>

            <div class="ls-sec-body">

                <ul class="img-ul240x160 mt30 clearfix">

                    <li class="img-li"><img src="data:images/_img240x160.jpg" class="img1"><p class="p1 p-a666"><a href="##">小记之八</a></p></li>

                    <li class="img-li"><img src="data:images/_img240x160.jpg" class="img1"><p class="p1 p-a666"><a href="##">小记之八</a></p></li>

                    <li class="img-li"><img src="data:images/_img240x160.jpg" class="img1"><p class="p1 p-a666"><a href="##">小记之八</a></p></li>

                </ul>

                <ul class="img-ul180x120 mt30 clearfix">

                    <li class="img-li"><a href="##"><img src="data:images/_img180x120.jpg" class="img1"></a></li>

                    <li class="img-li"><a href="##"><img src="data:images/_img180x120.jpg" class="img1"></a></li>

                    <li class="img-li"><a href="##"><img src="data:images/_img180x120.jpg" class="img1"></a></li>

                    <li class="img-li"><a href="##"><img src="data:images/_img180x120.jpg" class="img1"></a></li>

                </ul>

                <ul class="img-ul160x165 mt30 clearfix">

                    <li class="img-li"><a href="##" class="imgbox"><img src="data:images/_img140x78.jpg" class="img1"></a><p class="pbox"><a href="##" class="a1">追求品味</a></p></li>

                    <li class="img-li"><a href="##" class="imgbox"><img src="data:images/_img140x78.jpg" class="img1"></a><p class="pbox"><a href="##" class="a1">追求品味</a></p></li>

                    <li class="img-li"><a href="##" class="imgbox"><img src="data:images/_img140x78.jpg" class="img1"></a><p class="pbox"><a href="##" class="a1">追求品味</a></p></li>

                    <li class="img-li"><a href="##" class="imgbox"><img src="data:images/_img140x78.jpg" class="img1"></a><p class="pbox"><a href="##" class="a1">追求品味</a></p></li>

                </ul>

            </div>

        </div>

        <!-- 左侧 end -->

    </div>

    <div class="layout-r310">

        <!-- 右侧 start -->

        <!-- 右侧 end -->

    </div>

</div>

..