代码：PCHTML——图片列表

HTML文章/教程1年前 (2023)发布勤奋小助

0 0

图片列表:　　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="images/_img240x160.jpg" class="img1"><p class="p1 p-a666"><a href="##">小记之八</a></p></li>
                    <li class="img-li"><img src="images/_img240x160.jpg" class="img1"><p class="p1 p-a666"><a href="##">小记之八</a></p></li>
                    <li class="img-li"><img src="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="images/_img180x120.jpg" class="img1"></a></li>
                    <li class="img-li"><a href="##"><img src="images/_img180x120.jpg" class="img1"></a></li>
                    <li class="img-li"><a href="##"><img src="images/_img180x120.jpg" class="img1"></a></li>
                    <li class="img-li"><a href="##"><img src="images/_img180x120.jpg" class="img1"></a></li>
                </ul>
                <ul class="img-ul160x165 mt30 clearfix">
                    <li class="img-li"><a href="##" class="imgbox"><img src="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="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="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="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>