? ? 看一下我自定義的漂亮表格效果

? ??

?如果你喜歡，他很簡單的喲！

? ? 首先，它使用了bootstrap的布局，其他的樣式都是自己定義的

? ? ?HTML代碼如下：

? ?

<div class="l-panel col-xs-8 purpel">
<div class="l-panel-head ">
<div class="text-left">
<i class="fa fa-gittip l-img"></i>
<span>標(biāo)題</span>
</div>
</div>
<div class="row">
<h5 class="col-xs-4"><span>數(shù)據(jù)1:{{ user.f_willReceiveP |currency:'￥'}} </span></h5>
<h5 class="col-xs-4"><span>數(shù)據(jù)2:{{ user.f_averageYield *100}}% </span></h5>
<h5 class="col-xs-4"><span>數(shù)據(jù)3:{{ user.f_willReceivePI |currency:'￥' }} </span></h5>
<h5 class="col-xs-4"><span>數(shù)據(jù)4:{{user.planFreezeAmount |currency:'￥' }} </span></h5>
<h5 class="col-xs-4"><span>數(shù)據(jù)5:{{ user.f_totalInterest |currency:'￥' }} </span></h5>
</div>
</div>

? 看看我寫的CSS樣式

? ? ?

.l-panel {
margin-bottom: 2%;
margin-left: 2%;
padding: 15px 30px;
color: #999;
border-radius: 5px;
}

.l-panel .row span {
font-size: 14px;
}

.l-panel-head {
font-size: 24px;
font-weight: bold;
line-height: 60px;
color: #666;
border-bottom: 1px dotted #333;
}

.purpel {
background: #d9edf7;
box-shadow: 0 5px 0 #d6edf5;;
}

.l-img {
width: 40px;
}

.row > h5 {
line-height: 20px;
}

你還可以設(shè)置其他背景色： .green {
background: #dff0d8;
box-shadow: 0 5px 0 #dff0d6;
}

? 以及，你喜歡的其他背景色　　

? 需要注意的是，標(biāo)題旁的引入LOG圖像需要自己正確引入喲~

轉(zhuǎn)載于:https://www.cnblogs.com/qinglingyue/p/5163788.html

總結(jié)

以上是生活随笔為你收集整理的css漂亮表格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。