leoyi520

两种列表样式-经常用到

CSS

.titleBox{
height: 30px;
line-height: 30px;
color:#DB3657;
border-bottom: 1px solid #ccc;
}
.titleBox h4{
color:#DB3657;
float: left;
margin-left: 15px;
padding:4px 2px;
border-bottom: 2px solid #DB3657;
}

.detail-hot-list{
margin-top: 10px;
}
.detail-hot-list li{
float: left;
width:48%;
margin-bottom: 10px;
}
.detail-hot-list li:nth-child(odd){
margin-right: 10px;
}
.detail-hot-list li p{
overflow: hidden;
*zoom:1;
z-index: 1000;
margin-bottom: 0;
font-size: 14px;
}
.detail-hot-list li h4{
padding:5px;
font-size: 14px;
}

/*第二个的*/

/*下面是新闻*/
.newsBox .circle{
display: inline-block;
margin-right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #999;
}
.newsBox{
margin-bottom: 60px;
}
.newsBox ul{
margin: 10px 0;
}
.newsBox ul li{
margin:5px 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.newsBox ul li a{
color:#666;
}

.ico-more{
display: inline-block;
color:#fff;
height:17px;
width: 12px;
margin-right: 15px;
margin-top: 3px;
float:right;
background: url("../images/x_04.jpg")no-repeat;
}

html

<div class="row">
<!-- 案例展示 -->
<div class="titleBox clear">
<h4>案例展示</h4>
<a href="#" class="ico-more"></a>
</div>
<div class="col-xs-12">
<ul class="detail-hot-list clear">
<li><a href="#">
<img src="images/s_35.jpg" class="img-responsive">
<p>
<h4>珠江新城楼盘</h4>
</p>
</a></li>
<li><a href="#">
<img src="images/s_37.jpg" class="img-responsive">
<p>
<h4>广州白云楼盘</h4>
</p>
</a></li>
</ul>
</div>
</div>
<div class="row">
<!-- 新闻动态 -->
<div class="titleBox clear">
<h4>新闻动态</h4>
<a href="#" class="ico-more"></a>
</div>
<div class="col-xs-12">
<div class="newsBox clear white">
<ul>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录.</a></li>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录。 </a></li>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录。 </a></li>
</ul>
</div>
</div>
</div>