leoyi520

移动端商品评价表样式

这个是一个简单的商品评价表的布局。主要是用到了bootstrap!!

移动端商品评价表样式 - qq330168885 - 琉忆光年的博客

 CSS

.fl{
float: left;
}
.fr{
float: right;
}

.detail-title{
border-bottom: 1px solid #ccc;
margin-top: 10px;
margin-bottom: 5px;
padding-bottom: 5px;
}
.detail-intro{
background: #E5E5E5;
border:1px solid #ccc;
padding:10px 0;
}
.detail-intro ul li{
float:left;
width: 33.33%;
text-align: center;
font-size: 12px;
}

.detail-comment{
margin-top: 10px;
margin-bottom: 20px;
}
.ico-comment{
display: inline-block;
width: 100px;
height: 17px;
background: url("../images/xq_07.jpg")no-repeat;
}
.detail-comment p{
font-size: 12px;
text-indent: 2em;
}
.btn-more{
width: 82px;
margin-left: 40%;
}

HTML

<div class="detail-title clear">
<h5 class="fl">商品评价(709)</h5>
<span class="colorRed fr">好评率:98%</span>
</div>

<div class="detail-intro clear">
<ul>
<li><a href="#">有图追平(55)</a></li>
<li><a href="#">好评(90)</a></li>
<li><a href="#">中评(20)</a></li>
</ul>
</div>
<div class="detail-comment clear">
<div class="clear">
<h4 class="fl">葫芦娃</h4>
<span class="ico-comment fr"></span>
</div>
<p>
从下单到配送30分钟左右,很赞,在广州很少有做的好吃的肉骨茶,这个很不错,外卖小哥也给力,直接送到公司门口,以后还会继续订。
</p>
</div>
<input type="button" value="查看更多" class="btn btn-warning btn-more">
</div>



评论