[TOC]
## 面板 panel
### 默认面板
![](https://box.kancloud.cn/b937958d1a2a5f4a824906fc011dda3f_399x462.png)
~~~
<section class="ui-panel">
<h2 class="ui-arrowlink">猜你喜欢<span class="ui-panel-subtitle">1328条</span></h2>
<ul class="ui-grid-trisect">
<li>
<div class="ui-border">
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<div>
<h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
<h5 class="ui-nowrap">小仙</h5>
</div>
</div>
</li>
<li>
<div class="ui-border">
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<div>
<h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
<h5 class="ui-nowrap">小仙</h5>
</div>
</div>
</li>
<li>
<div class="ui-border">
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<div>
<h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
<h5 class="ui-nowrap">小仙</h5>
</div>
</div>
</li>
</ul>
</section>
~~~
### ui-panel-simple没有下边距
![](https://box.kancloud.cn/87df776d8e9b825ad1c4a3d31bb2ca47_411x150.png)
~~~
<section class="ui-panel ui-panel-simple ui-border-tb">
<h2 class="ui-arrowlink"><span>评论</span><span class="ui-panel-subtitle">1328条</span><span class="ui-panel-title-tips">更多评论</span></h2>
</section>
~~~
### 简单版,标题字体较小
![](https://box.kancloud.cn/f5181f1c810c9e1fbd7f83e5622e4648_416x429.png)
~~~
<section class="ui-panel ui-panel-pure ui-border-t">
<h3>历史搜索:</h3>
<ul class="ui-list ui-list-pure ui-border-tb">
<li class="ui-border-t">
<h5><span>1.faycheng </span><span class="date"> 2月12日</span></h5>
<h4>这本书太赞了,每次看都有不一样的体会和感悟,超级喜欢!期待大结局。</h4>
</li>
<li class="ui-border-t">
<h5><span>2.faycheng </span><span class="date"> 2月12日</span></h5>
<h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
</li>
<li class="ui-border-t">
<h5><span>3.faycheng </span><span class="date"> 2月12日</span></h5>
<h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
</li>
</ul>
</section>
~~~