leoyi520

移动端的普通列表样式

普通的列表样式

移动端的普通列表样式 - qq330168885 - 琉忆光年的博客


CSS

/*地产案例*/
.news-list{
margin-bottom: 20px;
}
.news-list li{
width: 100%;
padding:10px 0;
border-bottom: 1px solid #ccc;
overflow: hidden;
*zoom:1;
z-index: 100;
}
.news-list li .leftBox{
width: 73%;
margin-right: 5px;
}
.news-list li .leftBox h4{
font-size: 13px;
font-weight: bold;
text-overflow: ellipsis;
white-space:nowrap;
overflow: hidden;
margin:10px 0;
}
.news-list li .leftBox a{
color:#555;
}
.news-list li .leftBox p{
font-size: 13px;
color:#999;
}
.news-list li .rightBox{
width: 25%;
}


 HTML

<ul class="news-list clear">
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_09.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_12.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_15.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_18.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_09.jpg" class="img-responsive">
</div>
</li>
</ul>


评论